Neat huh? The only downer is that the use of box-shadow during the animation causes paints, so I can’t wholeheartedly recommend it for use on mobile devices (sad face). For high performance animations you always want to limit yourself to compositor-friendly options, like I said at the start, where the GPU gives you a hand and you avoid layout and paint. Mind you, you could probably make a version similar to this with a scaling shadow element. Would be kinda nice.

Rotating to the side

Another thing you can do is to bring elements from the side. Let’s take a list of elements and spin them round into another list.

There’s goes that offset stuff again, making it feel a bit more fluid. This is a little more challenging to do because you need to position the elements in 3D space using transforms and rotations, and no browser today has a good UI for debugging 3D. If it goes wrong you’ll be a sobbing mess of a human being, with only your intuition and number hackery to guide you. I know, I spent way too long trying to get this demo to work. (I’m not bitter.)

In any case, I hope you agree that this is a little more showbiz than sliding items to the side.

Card flips

I’d say this effect came into fashion with the iPhone and, to be honest, it’s probably fallen out again. Still, in the right places it will add a bit of interest to your UI.

For this you will have to avoid things like box-shadow because, like the first effect, it causes paints (which kill performance on mobile). That said, if you’re interested, I’ve made a separate version of this demo which does have the box-shadow on it, and it’s really nice. On Desktop. Where’s there is POWAH.

For something like this you’ll have to craft out animation keyframes because you want to animate scales and rotations independently, but they’re both controlled through the transform property. If you want some real lolz check out the CSS just for the animations. What with the vendor prefixes and all the keyframes you’ll see it’s a monster. So much so I actually wrote a hacky little script to create them all for me. You might want to too. I’m sure there are some good tools to do that automatically, but I’ve not found it. Tell me if you know!

Of course you can do all the transforms with JavaScript imperatively, but then the compositor misses out on the opportunity to optimize things.

Flip this!

My friend Hakim has spent quite a lot of time over the past year experimenting with UI elements, and many of them have surprising twists to them:

If you’re still in need of inspiration check out Effekt.css, a community effort to collate and collect high performance and showbiz CSS-based effects.