TypeScript icon, indicating that this package has built-in type declarations

    2.7.3 • Public • Published


    React TweenOne Component

    NPM version build status Test coverage node version npm download

    Browser Support

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


    npm install
    npm start







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


    var TweenOne = require('rc-tween-one');
    var React = require('react');
    var SvgDrawPlugin = require('rc-tween-one/lib/plugin/SvgDrawPlugin');
    React.render(<svg width="600" height="600">
        animation={{ SVGDraw:'50%'}}
        style={{ fill: 'none', strokeWidth: 20, stroke: '#00000' }}
    </svg>, container);


    var TweenOne = require('rc-tween-one');
    var React = require('react');
    var TweenOneGroup = TweenOne.TweenOneGroup;
      <div key="0">demo</div>
      <div key="1">demo</div>
    </TweenOneGroup>, container);




    2.5.x add currentRef, <TweenOne component={Row} ref={(c) => { c.currentRef === <Row /> }} />

    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
    repeat number 0 animation all data repeat, To repeat indefinitely, use -1
    yoyo boolean false animation all data alternating backward and forward on each repeat.
    onChange func null when the animation change called, callback({ moment, target, index, mode, timelineMode })
    moment number null set the current frame
    attr string style style or attr, attr is tag attribute. when morph SVG must be attr.
    resetStyle boolean false update animation data, reset init style
    component string / React.Element div component tag
    componentProps object null component is React.Element, component tag props, not add style

    animation = { }

    Basic animation param. please view animation terms

    name type default description
    type string to play type: to from
    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
    appearTo number null Add to the specified time
    yoyo boolean false true: alternating backward and forward on each repeat.
    ease string / func easeInOutQuad animate ease. refer
    bezier object null bezier curve animate
    onStart func null A function that should be called when the tween begins, callback(e), e: { index, target }
    onUpdate func null A function that should be called every time the animate updates, callback(e), e: { index, target, ratio }
    onComplete func null A function that should be called when the animate has completed, callback(e), e: { index, target }
    onRepeat func null A function that should be called each time the animate repeats, callback(e), e: { index, target }

    Cannot be used at the same time reverse and repeat: -1.

    animation =[ ] is timeline

    ease: function

    path easing;

    name type default description
    path string null svg path
    param object { rect: 100, lengthPixel: 200 } rect is block size, default: 100 * 100; lengthPixel default: curve is divided into 200 sections
    const path = 'M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0';
    const ease = Tween.easing.path(path, param = { rect: 100, lengthPixel: 200 });
    React.render(<TweenOne animation={{ x: 100, ease }}>
    </TweenOne>, container);


    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


    path = string or object;

    string: animation={{ path: 'M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0' }}, default: x, y, rotate;

    object: animation={{ path: { x: path, y: path, rotate: path } }}, can be controlled from their own needs.


    Children = { value:, floatLength, formatMoney };

    name type default description
    value number null children number to value.
    floatLength number null float precision length
    formatMoney boolean or { thousand, decimal } false format number to money.

    formatMoney = { thousand, decimal }

    name type default description
    thousand string , no explanation.
    decimal string . no explanation.


    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
    resetStyle boolean true TweenOne resetStyle, reset the initial style when changing animation.
    exclusive boolean false Whether to allow a new animate to execute immediately when switching. enter => leave: execute immediately leave
    component React.Element/String div component tag
    componentProps object - component tag props


    npm i rc-tween-one

    DownloadsWeekly Downloads






    Unpacked Size

    832 kB

    Total Files


    Last publish


    • afc163
    • jljsj33