I recently launched a CSS animation course for designers and developers wanting to improve their web animation skills. While building the course, I ran into the issue where content would animate before assets had downloaded. This article covers the approach I put together to fix the problem and ensure all animations played when expected.
It'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 prefer to do as a developer is just have that click toggle a class, and the menu animate to an auto dimension, and have it all happen performantly.
Let's combine three things we just learned here on CSS-Tricks:
With all these three things in our toolbox, we can Ajax for some arbitrary content and insert it onto the page with a revealing height animation. Tricky tricky!
You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you're anything like me, you were completely bewildered when you first tried learning about it.
Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.
Web Animation Workshops has started up again for Spring, we're headed for San Francisco, Chicago, and Paris this year, some dates still to be announced. Val Head and I team up to bring you two packed days full of content and exercises so that when you leave the class, you not only understand the techniques of how to animate in different tech stacks/environments but why. Here's is some of the content we cover: