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.
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.
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.