react-move

readme

Beautifully and deterministically animate anything in react.

Features

• 12kb! (minified)
• Animate anything you want.
• List Transitions eg. "enter", "update", and "leaving"
• Staggering and Stagger Groups
• Custom Easing
• Supports auto interpolation of
  • Numbers
  • Colors
  • SVG paths
  • Any string with embedded numbers
  • Arrays of any of these
  • Objects of any of these
  • Arrays of objects of any of these... you get the point
  • Anything d3-interpolate can handle

Demos

• Codepen
• Storybook

Installation

$ yarn add react-move
# or
$ npm install react-move --only=dev

CDN

<script src='https://npmcdn.com/react-move@latest/react-move.js'></script>

Animate

A component used for animating any property of any object.

import React from 'react'
import { Animate } from 'react-move'

<Animate
  // Set some default data
  default={{
    scale: 0,
    color: 'blue'
  }}
  // Update your data to whatever you want
  data={{
    scale: Math.random() * 1,
    color: _.sample(['red', 'blue', 'yellow']),
  }}
  duration={800}
  easing='easeQuadIn' // anything from https://github.com/d3/d3-ease
>
  {data => (
    <div
      style={{
        transform: `scale(${data.scale})`,
        background: data.color
      }}
    >
      {data.scale * 100}
    </div>
  )}
</Animate>

Transition

A component that enables animating multiple elements, including enter and exit animations.

import React from 'react'
import { Transition } from 'react-move'

const items = _.filter(items, (d, i) => i > Math.random() * 10)

<Transition
  // pass an array of items to "data"
  data={items}
  // use "getKey" to return a unique ID for each item
  getKey={(item, index) => index}
  // the "update" function returns the items normal state to animate
  update={item => ({
    translate: 1,
    opacity: 1,
    color: 'grey'
  })}
  // the "enter" function returns the items origin state when entering
  enter={item => ({
    translate: 0,
    opacity: 0,
    color: 'blue'
  })}
  // the "leave" function returns the items destination state when leaving
  leave={item => ({
    translate: 2,
    opacity: 0,
    color: 'red'
  })}
  //
  duration={800}
  easing='easeQuadIn' // anything from https://github.com/d3/d3-ease
  stagger={200} // you can also stagger by a percentage of the animation
  staggerGroup // use this prop to stagger by enter/exit/update group index instead of by overall index
>
  {data => ( // the child function is passed an array of itemStates
    <div>
      {data.map(item => {
        // data[0] === { key: 0, data: 0, state: {...} }
        return (
          <div
            key={item.key}
            style={{
              transform: `translateX(${100 * item.state.translate}px)`,
              opacity: item.state.opacity,
              color: item.state.color
            }}
          >
            {item.data} - {Math.round(item.percentage * 100)}
          </div>
        )
      })}
    </div>
  )}
</Transition>

Transition Staggering

With the Transition component you can stagger the timing of the items. Simply set the stagger prop to a number of milliseconds for each item to wait relative to it's preceding item.

Stagger by Group

With the Transition component in stagger mode, you can turn on staggerGroups, which will delay item animation relative to status groups instead of the entire list. The relative groups used in this mode are entering, updating and leaving.

Duration

The default duration is set to 500 milliseconds. To customize the animation duration, pass the duration prop any positive number of milliseconds.

Easing

To customize the easing for an animation, you can pass theeasing prop a string that references any d3-ease function.

Flex Duration

If the animation loop gets over-saturated, normally frames will be dropped to keep up with the duration. If you would rather not drop frames and instead dynamically increase the duration of the animation to fit each frame, set the flexDuration prop to true

Ignore keys

Anything and everything you pass to data, update, enter, and leave will be interpolated. If you have keys that you don't want interpolated, such as a regular string or a boolean, you can pass these keys to the ignore prop. For example:

<Animate
  data={{
    interpolatedValue: 27
    name: 'Tanner'
  }}
  ignore={['name']}
/>

Contributing

To suggest a feature, create an issue if it does not already exist. If you would like to help develop a suggested feature follow these steps:

• Fork this repo
• $ yarn
• $ yarn run storybook
• Implement your changes to files in the src/ directory
• View changes as you code via our React Storybook localhost:8000
• Make changes to stories in /stories, or create a new one if needed
• Submit PR for review

Scripts

• $ yarn run storybook Runs the storybook server
• $ yarn run test Runs the test suite
• $ yarn run prepublish Builds for NPM distribution
• $ yarn run docs Builds the website/docs from the storybook for github pages

Used By