react-flip-motion

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.

Install

npm install --save react-flip-motion

or

yarn add react-flip-motion

Good to know

Sadly, 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 FlipMotion itself.

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

// Import standard FlipMotion
import FlipMotion from "react-flip-motion";

// Import FlipMotion with animated container height
import { FlipMotionHeight } from "react-flip-motion";

API

FlipMotion

A component that performs transitions between children states.

The only thing you need to do is to pass children. These children must have a key prop.

FlipMotionHeight

Does the same thing as FlipMotion but also animates container height.

Props

Props are identical for FlipMotion and FlipMotionHeight

childClassName : String Classname for the element wrapping each child

childComponent : String / ReactClass = div 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 style prop.

childStyle : Object Style of the element wrapping each child

className : String Classname applied to container element

component : String / ReactClass = div The container element or component. If using a custom component, make sure it accepts and renders the style prop.

scaleX : Number = 0.6 X-scale of children at the start of mounting animation and the end of unmounting animation

scaleY : Number = 0.6 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

Example

Simple usage:

<FlipMotion>
  {list.map((item) =>
    <div key={item.id}>
      {item.text}
    </div>
  })}
</FlipMotion>

With custom styles on wrappers:

<FlipMotion style={{ display: "flex" }} childStyle={{ flexBasis: 400 }}>
  {children}
</FlipMotion>

Elements and classes specified:

<FlipMotion
  component="ul"
  className="container"
  childComponent="li"
  childClassName="element"
>
  {children}
</FlipMotion>

Changelog

1.3.3

• 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 FlipMotion

1.3.2

• Fixed FlipMotion trying to set state after it's unmounted
• Fixed crach when FlipMotion receives new children many times in a row

1.3.1

• Readme update

1.3.0

• Added new component FlipMotionHeight which also animates container height

1.2.1

• Fixed unmounting animations not showing if container has a background color

1.2.0

• Compatibility with React 16.4
• Hopefully fixed unmounting animations for good this time
• Added support for customizing transition scaling with scaleX and scaleY props

1.1.8

• 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.children had more elements than prevProps.children.
• 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

Why react-motion?

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