Creating Tinder like animations with CSS
Recently, I’ve helped in the making of a cool little side project WindowShopper.
My task (among other things) was to make sure the experience on mobile devices is as fun as possible. We drew upon heavily from the awesome Tinder app, which is a joy to use, mostly due to the slick swipe gestures and animations.
The gif was captured on a 3 year old Android phone while running recording software in the background. In real life it’s even smoother, try it out yourself!
CSS3 animations are amazing
We managed to get the smooth animations by relaying entirely on CSS3. These are styles which make the magic happen:
When you drag your finger across the screen, a class will be set based on the direction you’re dragging (
.animate-dislike-partial). This will cause the item to move and rotate slightly. If you change your mind and move
your finger in the opposite direction the class will be removed. When you release the screen the
is set, which removes the item completely. It’s so simple it feels like cheating.
this work by ditching DOM and using
What do you think? Any ideas on how to make this even better?