FLIP Your 60 FPS Animations, FLIP ’Em Good
“[FLIP is] absolutely superb for times where you are responding to user input and then animating something in response.” — Paul Lewis, FLIP Your Animations
I’ll let you in on a secret: If there’s one thing I love, it’s animating elements in mobile applications.
A while back, I wrote that animating for mobile can be easy if you follow the proper approach. I went through the advantages of animating properties in the Composite layer as it prepares the rendering and its calculations to be processed in the GPU.
Generally speaking, those are proven CSS3 animation guidelines that, once followed, will allow you to create fluid and smooth animations constantly running at 60 FPS.
So achieving performant animations in the Composite layer is not a problem. The problem is when you want to animate elements in the Layout.
The Problem of Animating in the Layout
So, I already know I should avoid using transitions that will trigger layout or paint properties — meaning top/left/right/bottom properties.
Here’s an example of how I used the top and height properties to create an animation:
And here’s the result:
And when I checked the timeline… ouch!
As you can see, this doesn’t create a fluid animation because it has the browser creating layouts each time, which will affect all of their children. Think of the children!
So, Sometimes CSS Alone Doesn’t Cut It
Elements in the Layout have widths or heights, lefts or tops. These are the cases in which CSS3 will not be enough. And that’s when this new method comes along. A method that flips the whole thing on its head.
Make no mistake: we’ll still be animating the Composite layer, but we’re doing pre-calculations and converting Layout animations into Composite ones. Cheaply, jank-free, smooth as butter.
And, don’t be afraid of that big word: pre-calculations. Yes, math is involved, but I’m here to make it as simple to grasp as possible. All the code I’ll show you is commented and easy to understand.
In order to manipulate styles in the Layout properly, without all that jank, CSS needs a little boost. This is where JavaScript comes to our rescue: it takes care of the calculations for you, so don’t go running for your TI-84 just yet.
What’s This FLIP Thing, Then?
FLIP stands for First, Last, Invert, Play:
- First: Initial state of the element we’re animating.
- Last: Final state of the element we’re animating.
- Invert: The magic show. This is where the fun happens, by calculating how the element changed since the first to the last position. (See commented code. Also, if you love magic, there’s more to be had here).
- Play: Apply the result between the First and the Last, using transform properties, so that the animation runs in the Composite layer.
Here’s the complete, commented code:
And then the CSS:
The result is this buttery smooth gem right here:
And what does the timeline show us?
FLIP Is Just Right for 60 FPS
Animations in mobile apps should run at 60 FPS. This is not always easy to achieve if you try to animate some styles that will impact effects in the Layout layer.
FLIP is really good for when you want fast responses immediately upon user action. And, for when you don’t know the exact location and dimensions of the object — because you’re smart and you consider all those different devices and screen sizes you have out there.
This kind of pre-calculation is possible because you have 100 ms after user input, where you can cook some magic to make something happen apparently instantaneously. Look at this beauty:
And here’s the code for you to play with:
See you on the FLIP side!
References
Smooth as Butter: Achieving 60 FPS Animations with CSS3, José Rosário
FLIP Your Animations, Paul Lewis
FLIPping Awesome Animations, David Khourshid
José Rosário | Mobile and Front-End Expert at OutSystems
You were going to leave without sharing? That’s FLIP’d up…
(editor’s note: I’ve lost control of José, I gave him this flip idea and now he can’t breathe without spilling out a cringe-worthy pun. If you’re reading this, I’m still hiding from him in a supply closet on the 3rd floor — send help!)
So please FLIP this to the top on Facebook, LinkedIn, Twitter, or email!
