Sequenced Animation

June 04, 2020

Introduction

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 Animations

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.

Sandbox code here.

Anime

I wasn't about to continue the FLIP path. It just felt too nasty. I quickly switched to Animejs animations. The approach here is simple, grab references to the animating elements and manually transform them with javascript. The downsides to this is that it can lead to more code because everything is done imperatively. The upside is that every little timing detail can be controlled. It's also easy to mix different types of animations together. You can run a FLIP animation, a fade animation, and another flip animation without breaking from the existing paradigm. Everything is done by manipulating elements through the same interface.

The result turned out great. It includes two animations. The second occurs after the user clicks on the circle.

Sandbox code here.

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.