React TweenOne Component
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
npm install
npm start
https://localhost:8100/examples/
https://react-component.github.io/tween-one/
var TweenOne = require('rc-tween-one');
var React = require('react');
React.render(<TweenOne animation={{x:100}}>
demo
</TweenOne>, container);var TweenOne = require('rc-tween-one');
var SvgDrawPlugin = require('rc-tween-one/lib/plugin/SvgDrawPlugin');
Tween.plugins.push(SvgDrawPlugin);
var TweenOne = require('rc-tween-one');
var React = require('react');
var TweenOneGroup = TweenOne.TweenOneGroup;
React.render(<TweenOneGroup>
<div key="0">demo</div>
<div key="1">demo</div>
</TweenOneGroup>, container);version >= 0.6.x support SVG;
| name | type | default | description |
|---|---|---|---|
| animation | object / array | null | animate configure parameters |
| paused | boolean | false | animate pause |
| reverse | boolean | false | animate revers |
| reverseDelay | number | 0 | animate revers start delay |
| onChange | func | null | when the animation change called, callback({ moment, item, tween, index, mode}) |
| moment | number | null | set the current frame |
| attr | string | style |
style or attr, attr is tag attribute. when morph SVG must be attr. |
| component | string / React.Element | div |
component tag |
transform need to set the initial value, must be set in the style;
0.4 filter =>
grayScale,sepia,hueRotate,invert,brightness,contrast,blur; { blur: '5px' } Unit must bring.
| name | type | default | description |
|---|---|---|---|
| type | string | to |
play type: to from |
| in style | string / number | null | CSS style value: translateX rotateX color marginTop or grayScale, sepia, hueRotate, invert, brightness, contrast, blur or gsap: x y... |
| duration | number | 450 | animate duration |
| delay | number | 0 | animate delay |
| repeat | number | 0 | animate repeat, To repeat indefinitely, use -1 |
| repeatDelay | number | 0 | repeat start delay |
| yoyo | boolean | false | if true, every other repeat cycle will run in the opposite direction so that the tween appears to go back and forth (forward then backward). |
| ease | string | easeInOutQuad |
animate ease. refer |
| bezier | object | null | bezier curve animate |
| onStart | func | null | A function that should be called when the tween begins |
| onUpdate | func | null | A function that should be called every time the animate updates |
| onComplete | func | null | A function that should be called when the animate has completed |
| onRepeat | func | null | A function that should be called each time the animate repeats |
bezier = { }
| name | type | default | description |
|---|---|---|---|
| type | string | soft |
thru, soft, quadratic, cubic |
| autoRotate | boolean | false | to automatically rotate the target according to its position on the Bezier path |
| vars | array | null | bezier point data，as: {x:100,y:100} |
bezier API refer to gsap BezierPlugin
SVGDraw = string or number;
{ SVGDraw: 30 } or { SVGDraw: 'start end' } start and end values can be %;
svg polygon or path values: polygon is points, path is d; demo
| name | type | default | description |
|---|---|---|---|
| appear | boolean | true | whether support appear anim |
| enter | object / array / func | { x: 30, opacity: 0, type: 'from' } |
enter anim twee-one data. when array is tween-one timeline, func refer to queue-anim |
| leave | object / array / func | { x: 30, opacity: 0 } |
leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim |
| onEnd | func | - | one animation end callback |
| animatingClassName | array | ['tween-one-entering', 'tween-one-leaving'] |
className to every element of animating |
| component | React.Element/String | div | component tag |