I’m new to animation in CSS. I’ve read The CSS Animations Pocket Guide and explored tutorials online, doing little code sketches of things to get a handle on the new possibilities.
So while working with one of the other designers on a landing page I saw a possibility for adding a small animated flourish. The design called for some square cards to have a front and back, with them rolling over when the user engaged them.
The first thing that I did was put together a pen that had the card rollover on hover. Using perspective I was able to get it look like the card was rolling over, however this feels too mechanical. There is no life in this animation.
See the Pen Flipping Card – Basic by Amazing Rando (@amazingrando) on CodePen.
I’ve been listening to the audiobook of Creativity, Inc which tells how Pixar’s management works hard to achieve a culture of creativity. So with thoughts of Disney and Pixar in my head I pushed forth to make the animation better. (I may have imagined myself as John Lasseter in my head as I went about this.)
The first thing that I changed was to have the flip actviate on click so that the backside of the card would persist. I have the card react on hover to give the user a clue that it can be clicked on.
For the flipping animation I decided that to make it a bit more organic I added a few details. While the card is flipping it is made larger, as if it is lifting up because it needs the room to flip. While turning I add a box-shadow to further convince the viewer that it has lifted off of the page.
See the Pen Flipping Card – Delightful Version by Amazing Rando (@amazingrando) on CodePen.
One thing that you may notice is that flipping from back to front isn’t as nice. There are two reasons for this. First, to do that would require Javascript which I have so far avoided. I’m not against using it, I just haven’t thus far.
The other reason is that I like that flipping back isn’t just a reversal. By having two different types of flip animations I think it makes it feel more organic.
Have a comment or question? You can tweet me at @amazingrando or Post navigation