Package Exports

rc-tween-one
rc-tween-one/lib/TimeLine
rc-tween-one/lib/TweenOne
rc-tween-one/lib/plugin/SvgDrawPlugin
rc-tween-one/lib/plugin/SvgMorphPlugin
rc-tween-one/lib/ticker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-tween-one) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rc-tween-one

React TweenOne Component

Browser Support


IE 9+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

Development

npm install
npm start

Example

http://localhost:8100/examples/

http://react-component.github.io/tween-one/

install

Usage

var TweenOne = require('rc-tween-one');
var React = require('react');
React.render(<TweenOne animation={{x:100}}>
  demo
</TweenOne>, container);

Plugin

var TweenOne = require('rc-tween-one');
var SvgDrawPlugin = require('rc-tween-one/lib/plugin/SvgDrawPlugin');
Tween.plugins.push(SvgDrawPlugin);

TweenOneGroup

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);

API

version >= 0.6.x support SVG;

props

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

animation = { }

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

animation =[ ] is timeline

BezierPlugin

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

SvgDrawPlugin

SVGDraw = string or number;

{ SVGDraw: 30 } or { SVGDraw: 'start end' } start and end values can be %;

SvgMorphPlugin

svg polygon or path values: polygon is points, path is d; demo

TweenOneGroup

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