npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

rc-tween-one

v2.6.5

Published

tween-one anim component for react

Downloads

52,951

Readme

rc-tween-one


React TweenOne Component

NPM version build status Test coverage node version npm download

Browser Support

IEChromeFirefoxOperaSafari
IE 10+ ✔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 React = require('react');
var SvgDrawPlugin = require('rc-tween-one/lib/plugin/SvgDrawPlugin');
TweenOne.plugins.push(SvgDrawPlugin);
React.render(<svg width="600" height="600">
  <TweenOne 
    animation={{ SVGDraw:'50%'}}
    d="M0,0L100,0"
    style={{ fill: 'none', strokeWidth: 20, stroke: '#00000' }}
    component="path"
  />
</svg>, container);

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

中文文档

props

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

nametypedefaultdescription
animationobject / arraynullanimate configure parameters
pausedbooleanfalseanimate pause
reversebooleanfalseanimate revers
reverseDelaynumber0animate revers start delay
repeatnumber0animation all data repeat, To repeat indefinitely, use -1
yoyobooleanfalseanimation all data alternating backward and forward on each repeat.
onChangefuncnullwhen the animation change called, callback({ moment, target, index, mode, timelineMode })
momentnumbernullset the current frame
attrstringstylestyle or attr, attr is tag attribute. when morph SVG must be attr.
resetStylebooleanfalseupdate animation data, reset init style
componentstring / React.Elementdivcomponent tag
componentPropsobjectnullcomponent is React.Element, component tag props, not add style

animation = { }

Basic animation param. please view animation terms

nametypedefaultdescription
typestringtoplay type: to from
durationnumber450animate duration
delaynumber0animate delay
repeatnumber0animate repeat, To repeat indefinitely, use -1
repeatDelaynumber0repeat start delay
appearTonumbernullAdd to the specified time
yoyobooleanfalsetrue: alternating backward and forward on each repeat.
easestring / funceaseInOutQuadanimate ease. refer
bezierobjectnullbezier curve animate
onStartfuncnullA function that should be called when the tween begins, callback(e), e: { index, target }
onUpdatefuncnullA function that should be called every time the animate updates, callback(e), e: { index, target, ratio }
onCompletefuncnullA function that should be called when the animate has completed, callback(e), e: { index, target }
onRepeatfuncnullA 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;

nametypedefaultdescription
pathstringnullsvg path
paramobject{ 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 }}>
  demo
</TweenOne>, container);

BezierPlugin

bezier = { }

nametypedefaultdescription
typestringsoftthru, soft, quadratic, cubic
autoRotatebooleanfalseto automatically rotate the target according to its position on the Bezier path
varsarraynullbezier 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

PathPlugin

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.

ChildrenPlugin

Children = { value:, floatLength, formatMoney };

nametypedefaultdescription
valuenumbernullchildren number to value.
floatLengthnumbernullfloat precision length
formatMoneyboolean or { thousand, decimal }falseformat number to money.

formatMoney = { thousand, decimal }

nametypedefaultdescription
thousandstring,no explanation.
decimalstring.no explanation.

TweenOneGroup

nametypedefaultdescription
appearbooleantruewhether support appear anim
enterobject / array / func{ x: 30, opacity: 0, type: 'from' }enter anim twee-one data. when array is tween-one timeline, func refer to queue-anim
leaveobject / array / func{ x: 30, opacity: 0 }leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim
onEndfunc-one animation end callback
animatingClassNamearray['tween-one-entering', 'tween-one-leaving']className to every element of animating
resetStylebooleantrueTweenOne resetStyle, reset the initial style when changing animation.
exclusivebooleanfalseWhether to allow a new animate to execute immediately when switching. enter => leave: execute immediately leave
componentReact.Element/Stringdivcomponent tag
componentPropsobject-component tag props