Staggered animation, also known as "follow through" or "overlapping action" is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book "The Illusion of Life". At its core, the concept deals with animating objects in delayed succession to produce fluid motion.
One thing that single
div pieces rarely do is animate. If you can transform your
div or one of its pseudo elements, that's fair (as Lynn Fisher does with her fantastic BB-8). But you cannot directly change the
transform of the individual "elements" you create inside your
div, since they are not actual DOM elements.
I am a big believer of trying something a little different and interesting to learn tools you otherwise might never learn. Working with the constraints of a single
div might not be great for production work, but it can be a great exercise (and challenge) to stretch your skills in a fun way. In that spirit, we'll use this technique to explore how Custom Properties (CSS Variables) work and even provide us a path to animation inside our
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.