Skip to content

archerbj/tween-one

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rc-tween-one


React TweenOne Component

NPM version build status Test coverage gemnasium deps node version npm download

Browser Support

IE Chrome Firefox Opera Safari
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

rc-tween-one

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

Packages

No packages published

Languages

  • JavaScript 99.9%
  • CSS 0.1%