FLIP Your 60 FPS Animations, FLIP ’Em Good

José Rosário
Feb 23, 2017 · 4 min read

“[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:

Note that the transform property replaces the top property we used before.

The result is this buttery smooth gem right here:

And what does the timeline show us?

Jank-free, baby!

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:

Design credits: Sérgio Moreira.

And here’s the code for you to play with:

See you on the FLIP side!


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!

OutSystems Experts

Digital transformation with a low-code platform…

OutSystems Experts

Digital transformation with a low-code platform meticulously designed, engineered and crafted by engineers for engineers.

José Rosário

Written by

Front-end developer who spends his working days at OutSystems with the Silk UI team, having the most fun while creating beautiful and buttery smooth animations.

OutSystems Experts

Digital transformation with a low-code platform meticulously designed, engineered and crafted by engineers for engineers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store