react-motion-flip

A simple component to perform FLIP animations using react-motion

Usage no npm install needed!

<script type="module">
  import reactMotionFlip from 'https://cdn.skypack.dev/react-motion-flip';
</script>

README

react-motion-flip

A simple component to naively perform transitions between children changes

Install

$ npm install --save react-motion-flip

Import

// in ES5/commonJS
var ReactMotionFlip = require("react-motion-flip").default
// in ES6
import ReactMotionFlip from "react-motion-flip"

API

ReactMotionFlip

A component that performs transitions between children states.

The only thing you need to do is passing children. These children must have a key prop.

props

  • style (optional): Object the container element style
  • childStyle (optional): Object the element wrapping each child style
  • springConfig (optional) Object spring configuration for react-motion (docs)

example

// simple usage
<ReactMotionFlip>
  {list.map((item) =>
    <div
      key={item.id}
      style={styles.child}
    >
      {item.text}
    </div>
  })}
</ReactMotionFlip>

// with custom styles on wrappers
<ReactMotionFlip
  style={{ display: "flex" }}
  childStyle={{ flexBasis: 400 }}
>
  {children}
</ReactMotionFlip>

What is FLIP?

FLIP is an animation technique from Paul Lewis. It stands for First, Last, Invert, Play.

  • First: At the initial state, measure where elements are
  • Last: Move elements to where they belong at the end of the animation
  • Invert: Use CSS transforms to move the elements to their initial positions
  • Play: Play the animation

This technique presents the advantage to remove the need for complex calculations to guess where the element you animate is going to end up. You just measure a diff.

You should read the great article explaining the technique on aerotwist

Why using react-motion?

react-motion provides a great way to configure animations: not with time, but with physics. This makes animations really smooth and natural.

Have a look at react-motion