FLIP

First Last Invert Play

Freddy Harris / @harrisfreddy

Previously…

Design constraints

Using only opacity and transform can be frustrating

I want to do this !

Example 1

Example 2

I want to be able to change the DOM

I don't want to do all the Layout in JavaScript

Fake Layout Animation

First

Last

Invert

Play

• First: the initial state of the elements
• Last: the final state of the elements
• Invert: Visually replace elements to their initial positions, as if they hadn't moved, using transform or opacity
• Play: Animate the change to the final state

// Get the first position.
var first = el.getBoundingClientRect();

// Move it to the end.
el.classList.add('totes-at-the-end');

// Get the last position.
var last = el.getBoundingClientRect();

// Invert.
var invert = first.top - last.top;

// Go from the inverted position to last.
var player = el.animate([
  { transform: 'translateY(' + invert + 'px)' },
  { transform: 'translateY(0)' }
], {
  duration: 300,
  easing: 'cubic-bezier(0,0,0.32,1)',
});

// Do any tidy up at the end of the animation.
player.addEventListener('finish', tidyUpAnimations);
          

By the way…

You told us it's not performant to produce a Layout change. But you did one !

Taking advantage of user perception

Bonus: React

• Calculate First on componentWillReceiveProps
• Calculate Last on componentDidUpdate
• Invert the position on componentDidUpdate
• Play the animation on componentDidUpdate

React component

import React from 'react'
import FlipMove from 'react-flip-move'

const ArticleList = ({articles}) => (
  <FlipMove>
    { articles.map( article => <Article key={article.id} {...article} /> ) }
  </FlipMove>
);
          

References

• Articles
• FLIP Your Animations
• Animating the Unanimatable. Smooth reordering transitions in React.js
• Talks
• The Applied Science of Runtime Performance
• High performance web user interfaces
• Tools
• react-flip-move
• Others
• CSS Triggers
• Jank Free

Merci

Freelance Front-end

React.js • Mobile First • Hybrid & Progressive Web Apps