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
import React from 'react';
import ES6Tween from 'react-es6-tween';
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 true -
isStopeed
[optional] - If true, tween will stop and removed from tick store -
isReversed
[optional] - If true, tween will reverse (likefrom <-> to
)
Static Props
-
from
[required] - Tween initial value -
to
[required] - Tween target value -
duration
[required] - Tween duration -
autoPlay
[optional] - When set this totrue
, tween auto-plays when wrapped component is mounted -
easing
[preferred] - Gives animation reality, recommended to use -
interpolation
[optional] - For complex tweens, useful for Games or Complex animations -
repeat
[optional] - How much times tween should repeat -
yoyo
[optional] - Used with combination ofrepeat
-
delay
[optional] - Delay before tween will start -
onStart
,onUpdate
,onComplete
[optional] - Callbacks
License
MIT