June 04, 2020
How do we implement sequenced animations in an understandable way? I recently explored some different ways of implementing complex sequence animations in React. I've been heavily inspired by Material Design's sequence animation documentation. Especially examples where an element in a list morphs from its list item context into a modal or page.
This kind of sequence animation can be done with CSS, but the end result can be hard to understand. For that reason, I explored some other options. The first failed and the second succeeded.
FLIP stands for First, Last, Invert, Play. It's a really cool technique where you record an elements first position, then it's last position - by forcing the end state very quickly - and then inverting the element back to it's original position via transforms, and then playing the animation by removing the transforms. It really cool in that you can position the first and last element positions with a variety of CSS position techniques, but use transform to simply transition from first to last.
The issue I ran into with this approach is when trying to combine FLIP animations with other arbitrary animations. For instance, running a FLIP animation, follow it up with a fade animation, and then end with another FLIP animation. Given the FLIP animation library I used, it was really difficult to get that sequencing right. Regardless, I was able to get something working.
The result turned out great. It includes two animations. The second occurs after the user clicks on the circle.
I'd probably continue down this approach for building out complex sequence animations in the future. It's become my default way of thinking about the problem. While I think it's possible to implement these animations in declarative ways, I think using a library like Animejs to imperatively implement sequenced animations is the way to go for now.