plus1tv / react-anime

✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!
https://codepen.io/collection/nrkjgo/
MIT License
1.55k stars 81 forks source link

Elasticity prop as a function #23

Open Crizzooo opened 7 years ago

Crizzooo commented 7 years ago

Hey all,

I'm trying to do some function based elasticity per the anime.js documentation.

The following works for duration and delay, but not for elasticity. Does React-Anime not support this feature? The function doesnt appear to have any impact on elasticity.

   <Anime
        translateY={[-400, 0]}
        opacity={[0, 1]}
        duration={ (el, i) => 3000 + 100 * i }
        delay={ (el, i) => { console.log('delay?', i); return 3500 + 100 * i;} }
        elasticity={ (el, i) => console.log('elastic?', i)}
        complete={ props.onComplete ? props.onComplete : null}
        easing="easeOutBack"
        >
        {props.text.split('').map( (el) => createLetter(el))}
      </Anime>

The function gets called and logs for delay, but never does so for elasticity.

Crizzooo commented 7 years ago

Nevermind, my mistake. Easing and Elasticity cannot both be applied at same time. My apologies!

Crizzooo commented 7 years ago

Nope, the above was an issue, but even with the easing prop removed, it appears that the elasticity function is never fired.

Does react-anime take in elasticity functions as well as numbers? My above example works if elasticity={400} for all children, but I want to make it dynamic based on the indexes of the children...

To recap, functions appear to be called in duration and delay props of Anime components, but elasticity funcs are not called.