SHARE
TWEET

Untitled

a guest Jan 23rd, 2019 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <StaggeredMotion
  2.   defaultStyles={[{h: 0}, {h: 0}, {h: 0}]}
  3.   styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
  4.     return i === 0
  5.       ? {h: spring(100)}
  6.       : {h: spring(prevInterpolatedStyles[i - 1].h)}
  7.   })}>
  8.   {interpolatingStyles =>
  9.     <div>
  10.       {interpolatingStyles.map((style, i) =>
  11.         <div key={i} style={{border: '1px solid', height: style.h}} />)
  12.       }
  13.     </div>
  14.   }
  15. </StaggeredMotion>
  16.    
  17. import { StaggeredMotion, PlainStyle, spring } from 'react-motion';
  18.  
  19. const styleFn = (previousInterpolatedStyles?: PlainStyle[]) => prevInterpolatedStyles.map((tmp, i) => {
  20.           return i === 0
  21.               ? { h: spring(100) }
  22.               : { h: spring(prevInterpolatedStyles[i - 1].h) };
  23.         })
  24. return (
  25.     <StaggeredMotion
  26.         defaultStyles={[{ h: 0 }, { h: 0 }, { h: 0 }]}
  27.         styles={styleComputer}>
  28.       />
  29.     {interpolatingStyles =>
  30.     <div>
  31.       {interpolatingStyles.map((style, i) =>
  32.         <div key={i} style={{border: '1px solid', height: style.h}} />)
  33.      }
  34.     </div>
  35.    }
  36.     </StaggeredMotion>
  37. );
  38.    
  39. const styleFn = (previousInterpolatedStyles?: PlainStyle[]) => prevInterpolatedStyles.map((tmp: PlainStyle, i: number) => {
  40.           return i === 0
  41.               ? { h: spring(100) }
  42.               : { h: spring(prevInterpolatedStyles[i - 1].h) };
  43.         })
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top