Animations can be a nice touch to a web page, but they can also be expensive. And if we’re not careful, they can quickly lead to jank. Ideally, any animations we use would display at a 60fps frame rate. The question is, how do we do this in a way that is as cheap as possible for the browser, so we can stay jank free?

One approach that Paul Lewis has written about is call FLIP. In this post, we’ll take a quick look at this approach and how it can be helpful in certain animation situations.

Overview

The overall idea of FLIP two-fold. First, we make sure the animations can be achieved by utilizing CSS properties that are compositor-only. This way they will not repeatedly trigger repaints (seeCSS Triggers, also by Paul Lewis, for a handy reference of which properties these are). Second, we do any animation-related calculations on the front end of the animation, in order to not need to continuously do so on each frame.

The FLIP acronym itself stands for: First, Last, Invert, Play.

  • First: We start with initial state of the element being animated.
  • Last: We get the final state of the same element.
  • Invert: We calculate the difference, and apply properties such as transform and opacity to make the element appear as though it’s in its initial state.
  • Play: Using CSS transitions, we simply remove the inverted styles, and the element eases back to its final state.

Example

Here’s a simple example using this approach (the comments in the JS code will explain the process).

See the Pen FLIP example by Shawn Maust (@afasterweb) on CodePen.

When To Use

A great use for this approach is for animating elements in a responsive context where the precise location of the starting or ending position will not be known until the animation is triggered. If the animation is tied to user input, ideally we have 100ms to do these calculations and start the animation. This gives the user the feel of an instantaneous start, as well as putting the browser in a position to maintain the 60fps target once the animation starts.

The downside is that in order to make use of this approach, the animations will need to be able to be done using compositor-only CSS properties, such as transform and opacity. This isn’t a big deal, but may cause us to reconsider which animations we use and how we structure them.

FLIP It

Overall, FLIP is an approach to animations that helps us lessen the burden on the browser throughout the animation, and thus gives us a better chance at giving users what they want—a smoother, jank-free experience.

Resources