This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes.
CSS transitions only work for CSS properties. If your list is shuffled, the items have rearranged themselves, but without the use of CSS. The DOM nodes don't know that their on-screen location has changed; they've just been removed and inserted elsewhere in the document.
Flip Move uses the FLIP technique to work out what such a transition would look like, and fakes it using 60+ FPS hardware-accelerated CSS transforms.
This release's big feature is Enter/Leave Animations. It's been requested a ton, and I'm happy with how it's come out.
For more information on its implementation, see the documentation below.
-
Items entering or leaving will now have an animation applied to them (the default is a preset called
elevator
, a combination of fading and scaling). If you want to retain the original behaviour, setenterAnimation
andleaveAnimation
tofalse
, in the props. -
Renamed
disableAnimations
todisableAllAnimations
, since there are now multiple animation types and this boolean disables them all.
npm i -S react-flip-move
UMD builds are also available via CDN:
Flip Move was inspired by Ryan Florence's awesome Magic Move, and offers:
-
Full compatibility with React 0.13, 0.14, and 15-rc2. Will be maintained.
-
Exclusive use of hardware-accelerated CSS properties (
transform: translate
) instead of positioning properties (top
,left
). Read why this matters. -
Full support for enter/exit animations, including some spiffy presets, that all leverage hardware-accelerated CSS properties.
-
Ability to 'humanize' transitions by staggering the delay and/or duration of subsequent elements.
-
Ability to provide
onStart
/onFinish
callbacks. -
Implementation based on the FLIP technique, a beautiful-in-its-simplicity method of tackling this problem. UMD build, when minified and gzipped, is only 4kb! ⚡
The implementation couldn't be simpler. Just wrap the items you'd like to move in a FlipMove
, with any custom options:
import FlipMove from 'react-flip-move';
class TopArticles extends Component {
renderTopArticles() {
return this.props.articles.map( article => <Article {...article} key={article.id} /> );
}
render() {
return (
<div className="top-articles">
<FlipMove easing="cubic-bezier(0, 0.7, 0.8, 0.1)">
{ this.renderTopArticles() }
</FlipMove>
</div>
);
}
}
Chrome | Firefox | Safari | IE | Edge | iOS Safari/Chrome | Android Chrome | |
---|---|---|---|---|---|---|---|
Supported | ✔ 10+ | ✔ 4+ | ✔ 6.1+ | ✔ 10+ | ✔ | ✔ 6.1+ | ✔ |
Curious how this works, under the hood? Read the Medium post.
v2.0 introduces Enter/Leave animations. For convenience, several presets are provided:
<FlipMove enterAnimation="elevator" leaveAnimation="elevator" />
<FlipMove enterAnimation="fade" leaveAnimation="fade" />
<FlipMove enterAnimation="accordianVertical" leaveAnimation="accordianVertical" />
<FlipMove enterAnimation="accordianHorizontal" leaveAnimation="accordianHorizontal" />
You can supply your own CSS-based transitions to customize the behaviour. Both enterAnimation
and leaveAnimation
take an object with from
and to
properties. You can then provide any valid CSS properties to this object, although for performance reasons it is recommended that you stick to transform
and opacity
.
<FlipMove
staggerDelayBy={50}
enterAnimation={{
from: {
transform: 'rotateX(135deg)'
},
to: {
transform: ''
}
}}
leaveAnimation={{
from: {
transform: ''
},
to: {
transform: 'rotateX(-120deg)',
opacity: 0.6
}
}}
/>
Option | Accepted Type(s) |
Default | Details |
---|---|---|---|
children |
Array
Object
|
The children passed to FlipMove are the component(s) or DOM element(s) that will be moved about. Accepts either a single child (as long as it has a unique key property) or an array of children.
|
|
duration |
Integer
String
|
350 | The length, in milliseconds, that the transition ought to take. |
easing |
String |
"ease-in-out" | Any valid CSS3 timing function (eg. "linear", "ease-in", "cubic-bezier(1, 0, 0, 1)"). |
delay |
Integer
String
|
0 | The length, in milliseconds, to wait before the animation begins. |
staggerDurationBy |
Integer
String
|
0 |
The length, in milliseconds, to be added to the duration of each subsequent element.
For example, if you are animating 4 elements with a duration of 200 and a staggerDurationBy of 20:
|
staggerDelayBy |
Integer
String
|
0 |
The length, in milliseconds, to be added to the delay of each subsequent element.
For example, if you are animating 4 elements with a delay of 0 and a staggerDelayBy of 20:
|
enterAnimation |
String
Boolean
Object
|
'elevator' |
Control the onEnter animation that runs when new items are added to the DOM.
For examples of this property, see the feature description above
|
leaveAnimation |
String
Boolean
Object
|
'elevator' |
Control the onLeave animation that runs when items are removed from the DOM.
For examples of this property, see the feature description above Accepts several types:
|
onStart |
Function |
A callback to be invoked once per child element at the start of the animation.
The callback is invoked with two arguments:
| |
onFinish |
Function |
A callback to be invoked once per child element at the end of the animation.
The callback is invoked with two arguments:
| |
onFinishAll |
Function |
A callback to be invoked once per group at the end of the animation.
The callback is invoked with two arguments:
| |
className |
String |
Flip Move wraps your children in a container element. You may wish to apply a custom class to that wrapping element (for example, for bootstrap-style grids). | |
style |
Object |
Flip Move wraps your children in a container element. You may wish to apply custom styles to the wrapping element.
| |
typeName |
string |
'div' |
Flip Move wraps your children in a container element. By default, this element is a div , but you may wish to provide a custom HTML element (for example, if your children are list items, you may wish to set this to ul ).
|
disableAnimations |
Boolean |
false |
Sometimes, you may wish to temporarily disable the animations and have the normal behaviour resumed. Setting this flag to true skips all animations.
|
-
Does not work with stateless functional component children. This is because Flip Move uses refs to identify and apply styles to children, and stateless functional components cannot be given refs.
-
All children need a unique
key
property. Even if Flip Move is only given a single child, it needs to have a uniquekey
prop for Flip Move to track it. -
Existing transition/transform properties will be overridden. I am hoping to change this in a future version, but at present, Flip Move does not take into account existing
transition
ortransform
CSS properties on its direct children. -
Elements whose positions have not changed between states will not be animated. This means that no
onStart
oronFinish
callbacks will be executed for those elements.
See the GitHub releases for version changes.
Many articles I've seen claim that in order to force browsers to use hardware acceleration, you need to resort to hacky fixes like transformZ(0)
or use the new will-change
property.
In my personal experimentations on modern versions of Chrome, Safari, Firefox and IE, these properties offer little to no gain (in Chrome's timeline I saw a savings of ~0.5ms on a 24-item shuffle).
Applying will-change
too willy-nilly can have an adverse effect on mobile browsers, so I have opted to not use it at all.
YMMV: Feel free to experiment with the property in your CSS. Flip Move will respect the wishes of your stylesheet :)
Further reading: CSS will-change Property
Contributors welcome! Please discuss new features with me ahead of time, and submit PRs for bug fixes with tests (Testing stack is Mocha/Chai/Sinon, tested in-browser by Karma).
This project uses React Storybook in development. The developer experience is absolutely lovely, and it makes testing new features like enter/leave presets super straightforward.
After installing dependencies, launch the Storybook dev server with npm run storybook
.