A simple component to naively perform transitions between children changes
$ npm install --save react-motion-flip
// in ES5/commonJS
var ReactMotionFlip = require("react-motion-flip").default
// in ES6
import ReactMotionFlip from "react-motion-flip"
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.
-
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)
// 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>
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
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