FLIP

First Last Invert Play

Freddy Harris / @harrisfreddy

Previously…

Layout
Paint
Composite

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

Merci

@harrisfreddy

Freelance Front-end

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