README.md
readmeBeautifully 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
Installation
Animate
A component used for animating any property of any object.
importReactfrom'react'import { Animate } from'react-move'<Animate// Set some default data
default={{
scale:0,
color:'blue',
rotate:0
}}// Update your data to whatever you want
data={{
scale:Math.random() *1,
color: ['red', 'blue', 'yellow'].find((d, i) => i ===Math.round(Math.random() *2)),
rotate:Math.random() >0.5?360:0
}}
duration={800}
easing='easeQuadIn'// anything from https://github.com/d3/d3-ease>
{data=> { // the child function is passed the current state of the data as an objectreturn (<div
style={{
borderRadius: ((data.rotate/360) *100) +'px',
transform:`translate(${data.scale*50}%, ${data.scale*50}%) scale(${data.scale}) rotate(${data.rotate}deg)`,
background:data.color
}}>
{Math.round(data.scale*100) /100}</div>
)
}}</Animate>Transition
A component that enables animating multiple elements, including enter and exit animations.
importReactfrom'react'import { Transition } from'react-move'constitems=_.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={d=> d}// the "update" function returns the items normal state to animate
update={d=> ({
translate:1,
opacity:1,
color:'grey'
})}// the "enter" function returns the items origin state when entering
enter={d=> ({
translate:0,
opacity:0,
color:'blue'
})}// the "leave" function returns the items destination state when leaving
leave={d=> ({
translate:2,
opacity:0,
color:'red'
})}
duration={800}
easing='easeQuadIn'// anything from https://github.com/d3/d3-ease// you can also stagger by a percentage of the animation
stagger={200}
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 items to be displayed// data[0] === { key: 0, data: 0, state: {...} }return (<div style={{height: (20*10) +'px'}}>
{data.map(d=> {return (<div
key={d.key}
style={{
position:'absolute',
transform:`translate(${100*d.state.translate}px, ${20*d.key}px)`,
opacity:d.state.opacity,
color:d.state.color
}}>
{d.data} - {Math.round(d.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.
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 storybookRuns the storybook server$ yarn run testRuns the test suite$ yarn run prepublishBuilds for NPM distribution$ yarn run docsBuilds the website/docs from the storybook for github pages