MENU


<StaggeredMotion>

<StaggeredMotion> allows you to define a collection of styles at once.


import { spring, StaggeredMotion, presets } from 'react-motion';export default function App(){  return(<StaggeredMotion defaultStyles={[{w: 0},{w: 500},{w: 200}]}
    styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
      return i === 0  ? {w: spring(100)} : {w: spring(300,{...presets.gentle})}})}>
    {interpolatingStyles => <div>  {interpolatingStyles.map((style, i) =>
      <div key={i} style={{border: '1px solid', height:100, width: style.w}} />)}
    </div>}
  </StaggeredMotion>);}