A simple component to naively perform transitions between children changes. Also optionally animates the height of their containing element ✌️.
This is a fork of react-motion-flip, which appears to be abandoned.
npm install --save react-flip-motion
yarn add react-flip-motion
Good to know
FlipMotion does not work that well when it receives props many times in a row in fast succession. Due to the complexity of
FlipMotion, this is easier to handle outside of
If your app renders very frequently and
FlipMotion animations are janky, you can try wrapping
FlipMotion in a component that reduces updates of children, like this component.
// Import standard FlipMotion;// Import FlipMotion with animated container height;
A component that performs transitions between children states.
The only thing you need to do is to pass children. These children must have
Does the same thing as
FlipMotion but also animates container height.
Props are identical for
childClassName : String
Classname for the element wrapping each child
childComponent : String / ReactClass =
The element or component wrapping each child. If using a custom component, it must be a class component. Also make sure it accepts and renders the
childStyle : Object
Style of the element wrapping each child
className : String
Classname applied to container element
component : String / ReactClass =
The container element or component. If using a custom component, make sure it accepts and renders the
scaleX : Number =
X-scale of children at the start of mounting animation and the end of unmounting animation
scaleY : Number =
Y-scale of children at the start of mounting animation and the end of unmounting animation
springConfig : Object
Spring configuration for react-motion (docs)
style : Object
Style of the container element
With custom styles on wrappers:
<FlipMotion = =>children</FlipMotion>
Elements and classes specified:
- Fixed unmounting elements without a measurement being positioned in the top left of the screen. They are now positioned in the top left corner of the containing element instead.
- Added info in readme about too frequent updates to
- Fixed FlipMotion trying to set state after it's unmounted
- Fixed crach when FlipMotion receives new children many times in a row
- Readme update
- Added new component
FlipMotionHeightwhich also animates container height
- Fixed unmounting animations not showing if container has a background color
- Compatibility with React 16.4
- Hopefully fixed unmounting animations for good this time
- Added support for customizing transition scaling with
- Fixed unmount animations being cancelled when FlipMotion received new props many times in a row in a short span of time.
- Issue #7: Fixed unmounting elements not being animated when
nextProps.childrenhad more elements than
- Issue #5: Hopefully fixed issues with buggy transforms caused by positioned parent elements.
What is FLIP?
FLIP is an animation technique from Paul Lewis. It stands for First, Last, Invert, Play.
- First: Before the animation, measure the position of all elements
- Last: Let elements render in their new positions and measure
- Invert: Use CSS transforms to move the elements to their initial positions
- Play: Play the animation (animate the transform to 0)
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