MENU


<StaggeredMotion>

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


RESETRUNFULL
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>);}