- 12kb! (minified)
- Supported in React, React-Native & React-VR
- 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
$ yarn add react-move
# or
$ npm install react-move --only=dev
<script src='https://npmcdn.com/react-move@latest/react-move.js'></script>
A component for animating any single object.
data={ Object }
| Required- An object of keys that that you wish to animate. When these values are changed, each and every value in this object will be interpolated (unless its key is found in the
ignore
prop)
- An object of keys that that you wish to animate. When these values are changed, each and every value in this object will be interpolated (unless its key is found in the
default={ Object }
- An object of keys to be used as the initial state of the animation.
duration={ Number }
|500
- The duration in milliseconds for each item to animate
easing={ string | function }
|easeCubicOut
- A string that references a d3-ease function, or a custom easing function that receives a progress decimal and returns a new progress decimal.
ignore={ []String }
|false
- Any keys found in this array will not be interpolated, and instead will be immediately set to the new value
flexDuration={ Boolean }
|false
- Avoid dropping frames at all cost by dynamically increasing the duration of the animation loop becomes overwhelmed.
immutable={ Boolean }
|true
- By default, strict equality
===
between the olddata
and newdata
is used to detect when an animation should occur. If you wish, you can disableimmutable
mode which falls back to usingJSON.stringify
to determine if an animation should occur.
- By default, strict equality
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>
A component that enables animating multiple elements, including enter and exit animations.
data={ []Objects }
|[]
| Required- An array of objects you wish to track. These are not necessarily the exact values you wish to animate, but will used to produce the animated values.
getKey={ function }
|(d, i) => i
- A function that returns a unique identifier for each item. This is used to track
enter
,update
andleave
states/groups.
- A function that returns a unique identifier for each item. This is used to track
update={ function }
| Required- A function that returns the state for an item if it is neither
entering
orleaving
the list of items.
- A function that returns the state for an item if it is neither
enter={ function }
|() => null
- A function that returns the state for an item if it is
entering
the list of items. If nothing is returned, theupdate
state is used.
- A function that returns the state for an item if it is
leave={ function }
|() => null
- A function that returns the state for an item if it is
leaving
the list of items. If nothing is returned, theupdate
state is used.
- A function that returns the state for an item if it is
duration={ Number }
|500
- The duration in milliseconds for each item to animate
easing={ string | function }
|easeCubicOut
- A string that references a d3-ease function, or a custom easing function that receives a progress decimal and returns a new progress decimal.
stagger={ Number }
|0
- Number of milliseconds for each item to wait relative to it's preceding item.
staggerGroups={ Boolean }
|false
- Delays item animation relative to status groups instead of the entire list. The relative groups used in this mode are
entering
,updating
andleaving
.
- Delays item animation relative to status groups instead of the entire list. The relative groups used in this mode are
ignore={ []String }
|false
- Any keys found in this array will not be interpolated, and instead will be immediately set to the new value
flexDuration={ Boolean }
|false
- Avoid dropping frames at all cost by dynamically increasing the duration of the animation loop becomes overwhelmed.
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>
If you would rather use a different easing function or just build your own, you can! Simply pass a function to the easing
prop and you're off!
<Animate
easing={(t) => { // This is Chart.js's easeOutBounce function :)
if ((t /= 1) < (1 / 2.75)) {
return 1 * (7.5625 * t * t)
} else if (t < (2 / 2.75)) {
return 1 * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75)
} else if (t < (2.5 / 2.75)) {
return 1 * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375)
}
return 1 * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375)
}}
>
Using one of our favorite tools called Springer, you can effortlessly build your own realistic spring-based easing functions, and achieve a look and feel similar that of React-Motion.
import React from 'react'
import { Animate } from 'react-move'
import Springer from 'springer'
const normalSpring = Springer()
const hardSpring = Springer(0.9, 0.3)
const wobblySpring = Springer(0.5, 0.9)
<Animate
easing={wobblySpring}
/>
Notes: Springer does not deliver eventual and interruptible animation. For animations requiring those characteristics, we suggest using React-Motion.
Want to change the defaults for either Animate
or Transition
?
import { Animate, Transition } from 'react-move'
// Before using either component, change any property in the Component's 'defaults' object
Object.assign(Animate.defaults, {
duration: 3000,
easing: 'easeElasticOut'
})
Object.assign(Transition.defaults, {
stagger: 100
})
// Or create your own wrapped versions!
class MyAnimate extends React.Component {
render () {
return (
<Animate
duration={3000}
easing='easeElasticOut'
{...this.props}
/>
)
}
}
class MyTransition extends React.Component {
render () {
return (
<Transition
stagger={100}
{...this.props}
/>
)
}
}
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
$ 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