A simple component to naively perform transitions between children changes
MIT License
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.
component
(optional): String | ReactClass
the container element or component (default: div
)style
(optional): Object
style of the container elementclassName
(optional): String
class applied to container elementchildComponent
(optional): String | ReactClass
the element or component wrapping each child (default: div
)childStyle
(optional): Object
style of the element wrapping each childspringConfig
(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>
// elements and classes specified
<ReactMotionFlip
element="ul"
childElement="li"
className="container"
>
{children}
</ReactMotionFlip>
FLIP is an animation technique from Paul Lewis. It stands for First, Last, Invert, Play.
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