Building Performant Expand & Collapse Animations

t's starting to be pretty common knowledge that there are only 2 things you can animate cheaply in CSS: opacity and transforms. Anything else, you run a high risk of that animation/transition being choppy. Fortunately, there is a ton of animation possibility with those properties, especially since transform can move and resize elements any-which-way.

You can even get tricky and fake the animating of other properties with transforms. In this tutorial on the Google Chrome Developers Blog, Paul Lewis and Stephen McGruer explain how you can use a vertical scale transform to fake a height animation, while simultaneously triggering a vertical scale transform the other direction so nothing looks squished.

It's clever, performant, and useful. I moved a copy to CodePen to play with.

It sure is a bunch of code for such a simple result, though. What I'd preferto do as a developer is just have that click toggle a class, and the menuanimate to an auto dimension, and have it all happen performantly.