react-es6-tween
An declarative React.js wrapper for es6-tween tweening library
Installation
npm i react-es6-tween# or yarn i react-es6-tween
Usage
Note: For detailed info about how-to use and how it works, please refer to es6-tween repository
;; const MyAnimation = <ES6Tween from= x: 0 to= x: 200 > <div id="my-node" /> </ES6Tween>;
See example.html
at GitHub repository of react-es6-tween
for better understanding
Warning: When component is unmounted, tween will be stopped and can be resume after only remount
Props
Updateable props
isPlaying
[optional] - If false, tween pauses until you pass trueisStopeed
[optional] - If true, tween will stop and removed from tick storeisReversed
[optional] - If true, tween will reverse (likefrom <-> to
)
Static Props
from
[required] - Tween initial valueto
[required] - Tween target valueduration
[required] - Tween durationautoPlay
[optional] - When set this totrue
, tween auto-plays when wrapped component is mountedeasing
[preferred] - Gives animation reality, recommended to useinterpolation
[optional] - For complex tweens, useful for Games or Complex animationsrepeat
[optional] - How much times tween should repeatyoyo
[optional] - Used with combination ofrepeat
delay
[optional] - Delay before tween will startonStart
,onUpdate
,onComplete
[optional] - Callbacks
License
MIT