FLIP animation technique
While playing around with JS animation frameworks recently, I again got reminded of the importance of understanding FLIP animations and how it can help improve animation performance.
What is the FLIP technique
“FLIP” starts for “First Last Invert Play”. It’s an animation technique first described by Paul Lewis. The goal was to achieve highly performant animations, even when animating attributes that are usually expensive to re-calculate (e.g. positioning, height, width, flexbox, etc).
First — Determine the current position/state of the element you want to animate
Last — Determine the end position/state you want the element to be in once the animation is finished
Invert - From that “last” position, create a transform that inverts the element back into the “first” position and use that transform as your starting point
Play - Play the animation using the transition you just determined
Why does FLIP improve performance
The idea is to avoid animating or transitioning any CSS attributes that are expensive to animate. Attributes like
left, etc are pretty expensive for the browser. While on the flip side, attributes like
opacity are comparably cheap.
Using the FLIP method, you can animate e.g. widths and heights while benefiting from these browser internal optimisations.