CSS Animations: The Untold Story

If you need advanced animations for things like interactive experiences of very complex scenarios, then a fully fledged animation lib is the right tool for the job, and GSAP is an excellent choice.

If you need fairly simple things like sliding panels, off-canvas menus, fades, and other common flourishments, CSS is always going to be the winner in terms of performance and lower overhead.

Look at it this way: No matter how good JS-driven animation libs get at tweening, syncing frames, and playing in the DOM, they'll never be able to beat the browser itself in the long term.

JS performance in V8 and SpiderMonkey is so good that we get to be competitive with the browser itself when it comes to things like animating. That's awesome! However, no matter how many tricks or strategies libs exploit and leverage, the browser will always have the upper hand. You're running inside of it and abiding by its rules, after all.

Thanks for the article. The video was interesting and the comment section has some good discussion.

I didn't see mention of mobile in the article, which I think is where the performance characteristics of both approaches will really become apparent. I'd be very interested in seeing these benchmarks on iOS and Android devices.