Comparison with other React FLIP libraries
Feature | react-flip-move |
react-overdrive |
react-flip-toolkit |
---|---|---|---|
Animate position | ✅ | ✅ | ✅ |
Animate scale | ❌ | ✅ | ✅ |
Animate opacity | ❌ | ✅ | ✅ |
Animate parent's size without warping children | ❌ | ❌ | ✅ |
Use real FLIP instead of cloning & crossfading | ✅ | ❌ | ✅ |
Use springs for animations | ❌ | ❌ | ✅ |
Support spring-based stagger effects | ❌ | ❌ | ✅ |
Easy to set up & beginner-friendly | ✅ | ✅ |
- Demos
- 🆕 Interactive Tutorial
- Quick start
- The Components
- Scale transitions made eas(ier)
- Library details
- Troubleshooting
- Performance
- Updating list (
react-flip-move
example clone) - Simplest possible example
- Guitar shop
- Overly complex, nested cards example
- React-flip-toolkit logo
- Using Portals
npm install react-flip-toolkit
-
Wrap your animations with a single
Flipper
component that has aflipKey
prop that changes every time animations should happen. -
Wrap elements that should be animated with
Flipped
components that have aflipId
prop matching them across renders.
import React, { Component } from React;
import { Flipper, Flipped } from 'react-flip-toolkit';
class AnimatedSquare extends Component {
state = { fullScreen: false };
toggleFullScreen = () => {
this.setState(prevState => ({
fullScreen: !prevState.fullScreen
}));
};
render() {
return (
<Flipper flipKey={this.state.fullScreen}>
<Flipped flipId="square">
<div
className={this.state.fullScreen ? "full-screen-square" : "square"}
onClick={this.toggleFullScreen}
/>
</Flipped>
</Flipper>
);
}
}
The parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page.
<Flipper flipKey={someKeyThatChanges}>
{/* children */}
</Flipper>
prop | default | type | details |
---|---|---|---|
flipKey (required) | - | string , number , bool |
Changing this tells react-flip-toolkit to transition child elements wrapped in Flipped components. |
children (required) | - | node |
One or more element children |
spring | noWobble |
string or object |
Provide a string referencing one of the spring presets — noWobble (default), veryGentle , gentle , wobbly , or stiff , OR provide an object with stiffness and damping parameters. Explore the spring setting options here. The prop provided here will be the spring default that can be overrided on a per-element basis on the Flipped component. |
applyTransformOrigin | true |
bool |
Whether or not react-flip-toolkit should apply a transform-origin of "0 0" to animating children (this is generally, but not always, desirable for FLIP animations) |
element | div |
string |
If you'd like the wrapper element created by the Flipped container to be something other than a div , you can specify that here. |
className | - | string |
A class applied to the wrapper element, helpful for styling. |
portalKey | - | string |
In general, the Flipper component will only apply transitions to its descendents. This allows multiple Flipper elements to coexist on the same page, but it will prevent animations from working if you use portals. You can provide a unique portalKey prop to Flipper to tell it to scope element selections to the entire document, not just to its children, so that elements in portals can be transitioned. |
debug | false |
bool |
This experimental prop will pause your animation right at the initial application of FLIP-ped styles. That will allow you to inspect the state of the animation at the very beginning, when it should look similar or identical to the UI before the animation began. |
decisionData | - | any |
Sometimes, you'll want the animated children of Flipper to behave differently depending on the state transition — maybe only certain Flipped elements should animate in response to a particular change. By providing the decisionData prop to the Flipper component, you'll make that data available to the shouldFlip and shouldInvert methods of each child Flipped component, so they can decided for themselves whether to animate or not. |
staggerConfig | - | object |
Provide configuration for staggered Flipped children. The config object might look something like the code snippet below: |
staggerConfig={{
// the "default" config will apply to staggered elements without explicit keys
default: {
// default direction is forwards
reverse: true,
// default is .1, 0 < n < 1
speed: .5
},
// this will apply to Flipped elements with the prop stagger='namedStagger'
namedStagger : { speed: .2 }
}}
Wraps an element that should be animated.
E.g. in one component you can have
<Flipped flipId="coolDiv">
<div className="small" />
</Flipped>
and in another component somewhere else you can have
<Flipped flipId="coolDiv">
<div className="big" />
</Flipped>
and they will be tweened by react-flip-toolkit
.
The Flipped
component produces no markup, it simply passes some props down to its wrapped child. If the child is a React component, make sure it passes down unknown props directly to the rendered DOM element.
prop | default | type | details |
---|---|---|---|
children (required) | - | node |
Wrap a single child with the Flipped component. |
flipId (required) | - | string |
Use this to tell react-flip-toolkit how elements should be matched across renders so they can be animated. |
inverseFlipId | - | string |
Refer to the id of the parent Flipped container whose transform you want to cancel out. Read more about canceling out parent transforms here. |
transformOrigin | "0 0" |
string |
This is a convenience method to apply the proper CSS transform-origin to the element being FLIP-ped. This will override react-flip-toolkit 's default application of transform-origin: 0 0; if it is provided as a prop. |
spring | noWobble |
string or object |
Provide a string referencing one of the spring presets — (default), veryGentle , gentle , wobbly , or stiff , OR provide an object with stiffness and damping parameters. Explore the spring setting options here. |
stagger | false |
boolean or string |
Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. Provide true to stagger the element with all other staggered elements. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key. |
The above animation uses onAppear
and onExit
callbacks for fade-in and fade-out animations.
prop | arguments | details |
---|---|---|
onAppear | element , index |
Called when the element first appears. It is provided a reference to the DOM element being transitioned as the first argument, and the index of the element relative to all appearing elements as the second. |
onDelayedAppear | element , index |
This is a replacement for onAppear that is called only after all exiting elements have finished exiting. It automatically applies opacity: 0 to newly appeared elements at the very beginning. The onDelayedAppear function is responsible for setting the opacity to the final value. |
onStart | element |
Called when the FLIP animation starts. It is provided a reference to the DOM element being transitioned as the first argument |
onComplete | element |
Called when the FLIP animation completes. It is provided a reference to the DOM element being transitioned as the first argument. (If transitions are interruped by new ones, onComplete will still be called.) |
onExit | element , index , removeElement |
Called when the element is removed from the DOM. It must call the removeElement function when the exit transition has completed. |
By default the FLIP-ped elements' translate, scale, and opacity properties are all transformed. However, certain effects require more control so if you specify any of these props, only the specified attribute(s) will be tweened:
prop | type | details |
---|---|---|
translate | bool |
Tween translateX and translateY |
scale | bool |
Tween scaleX and scaleY |
opacity | bool |
Functions to control when FLIP happens
prop | arguments | details |
---|---|---|
shouldFlip | prevDecisionData , currentDecisionData |
A function provided with the current and previous decisionData props passed down by the Flipper component. Returns a boolean to indicate whether a Flipped component should animate at that particular moment or not. |
shouldInvert | prevDecisionData , currentDecisionData |
A function provided with the current and previous decisionData props passed down by the Flipper component. Returns a boolean indicating whether to apply inverted transforms to Flipped children that request it via an inverseFlipId . |
Some other FLIP libraries just allow you to animate position changes, but things get more interesting once you can animate scale changes as well.
The problem with scale animations has to do with children — if you scale a div up 2x, you will warp any children it has by scaling them up too, creating a weird-looking animation. That's why this library allows you to wrap the child with a Flipped
component that has an inverseFlipId
to counteract the transforms of the parent:
<Flipped flipId={id}>
<div>
<Flipped inverseFlipId={id} scale>
<div>some text that will not be warped</div>
</Flipped>
</div>
</Flipped>
By default, both the scale and the translation transforms of the parent will be counteracted (this allows children components to make their own FLIP animations without being affected by the parent).
But for many/most use cases, you'll want to additionally specify the scale
prop to limit the adjustment to the scale and allow the positioning to move with the parent.
For the most seamless results the DOM element with the inverse transform applied should lie flush against its parent container — that means any padding should be applied to the inverted container rather than the parent container.
- 7.6kb minified and gzipped
- React 16+
- Tested in latest Chrome, Firefox, Safari, Edge, and IE 11.
- Uses Rematrix for matrix calculations and a simplified fork of Rebound for spring animations.
- Make sure you're updating the
flipKey
attribute in theFlipper
component whenever an animation should happen. - If one of your
Flipped
components is wrapping another React component rather than a DOM element, make sure that component passes down unknown props directly to its DOM element, e.g.:<div className="square" {...rest} />
- At any point, there can only be one element with a specified
flipId
on the page. If there are multipleFlipped
elements on the page with the same id, the animation will break. Check to make sure allflipId
s are unique. - Make sure you are animating the element you want to animate and not, for instance, a wrapper div. If you are animating an inline element like some text, but have wrapped it in a
div
, you're actually animating the div, which might have a much wider width that you'd expect at certain points, which will throw off the animation. Check to see if you need to add aninline-block
style to the animated element. - Make sure you don't have any competing CSS transitions on the element in question.
If you still can't figure out what's going wrong, you can add the the debug
prop directly on your Flipper
component to pause transitions at the beginning.
React-flip-toolkit
does a lot of work under the hood to try to maximize the performance of your animations — for instance, off-screen elements won't be animated, and style updates are batched to prevent layout thrashing.
However, if you are building particularly complex animations—ones that involve dozens of elements or large images— there are some additional strategies you can use to ensure performant animations.
When you trigger a complex FLIP animation with react-flip-toolkit
, React could be spending vital milliseconds doing unnecessary reconciliation work before allowing the animation to start. If you notice a slight delay between when the animation is triggered, and when it begins, this is probably the culprit. To short-circuit this possibly unnecessary work, try using PureComponent
for your animated elements, and seeing if you can refactor your code to minimize prop updates to animated children when an animation is about to occur.
For example, in a hypothetical UI where you are animating the positions of several cards at once, you might want to update a Card
component that looks like this:
import React, { Component } from 'react'
class Card extends Component {
render() {
return (
<Flipped flipId={this.props.id}>
<div>
{/* card content goes here */ }
</div>
</Flipped>
)
}
}
to this:
import React, { PureComponent } from 'react'
class Card extends PureComponent {
// everything else is the same
}
Remember to always provide key
props as appropriate to your elements, and check the React docs for some caveats on when to not use PureComponent
. But if you have complex animations with noticeable lag, think about giving PureComponent
a try.
.image {
will-change:transform;
}
This somewhat mysterious CSS property tells the browser to anticipate changes to an element. It should be used with caution, because it can increase browser resource usage. If you are animating images (svg
, jpg
, etc), I would recommend trying it out and seeing if it increases the performance of the animation. In my tests, when animating large images, will-change:transform
increased animation frame rate considerably.