staggered-motion.js

/**
 * Let's say you have a list of 4 icons that need to "pop up" in sequence when their parent element is hovered. 
 * To give the icons a more initial exageration, use loose "initial" damping and a stiffer "final" damping.
 * If you want to give your staggered animation more oomph at the end, reverse these values.
 */ 
<StaggeredMotion
  defaultStyles={[ { y: 10 }, { y: 10 }, { y: 10 }, { y: 10 } ]}
  styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
    return i === 0
      
      // Initial stiffness and damping
      ? { y: spring(0, { stiffness: 300, damping: 18 }) }
      
      // Final stiffness and damping 
      : { y: spring(prevInterpolatedStyles[i - 1].y, { stiffness: 300, damping: 26 }) };
  })}
>
  [...]
</StaggeredMotion>