Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rc-tween-one

Package Overview
Dependencies
Maintainers
2
Versions
226
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-tween-one

tween-one anim component for react

  • 3.0.6
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
38K
decreased by-20.44%
Maintainers
2
Weekly downloads
 
Created
Source

rc-tween-one


React TweenOne Component

NPM version build status Codecov 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/

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

3.x: https://tween-one.vercel.app/

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

nametypedefaultdescription
animationobject / arraynullanimate configure parameters
pausedbooleanfalseanimate timeline pause
reversebooleanfalseanimate timeline revers
delaynumber0animate timeline delay
repeatnumber0animation all data repeat, To repeat indefinitely, use -1
repeatDelaynumber0animate timeline repeat delay
yoyobooleanfalseanimation all data alternating backward and forward on each repeat.
onChangefuncnullwhen the animation change called, callback({ moment, targets, index, mode, ratio, vars, index, repeat })
onChangeTimelinefuncnullwhen the animation change called, callback({ mode, targets, vars, moment, totalTime, repeat })
momentnumbernullset the current frame
regionStartTimenumber0Set the start time of the animation region
regionEndTimenumbernullSet the end time of the animation region
attrbooleanfalseattribute animation is true, when morph SVG must be true.
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
[key: string]string number arraynullAll variables based on number, such as left, x, color, shadow
typestringtoplay type: to from set
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.
easestringeaseInOutQuadanimate ease refer or svg path M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0
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, targets, ratio }
onCompletefuncnullA function that should be called when the animate has completed, callback(e), e: { index, targets }
onRepeatfuncnullA function that should be called each time the animate repeats, callback(e), e: { index, targets }

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

animation =[ ] is timeline

<TweenOne animation={[{ x: 100 }, { y: 100 }]} />

Plugins

SvgDrawPlugin

import { Plugins } from 'rc-tween-one';
import SvgDrawPlugin from 'rc-tween-one/es/plugin/SvgDrawPlugin';
Plugins.push(SvgDrawPlugin);

<TweenOne animation={{ SVGDraw: '10%' }} />

SVGDraw = string or number;

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

SvgMorphPlugin

import { Plugins } from 'rc-tween-one';
import SvgMorphPlugin from 'rc-tween-one/es/plugin/SvgMorphPlugin';
Plugins.push(SvgMorphPlugin);

<TweenOne animation={{ SVGMorph: { path: '300,10 500,200 120,230 450,220 0,20' }}} />
SvgMorphPlugin API
nametypedefaultdescription
pathstringnullsvg path, ref: M0,0L100,0;
attrstringnullSvg tag attributes, example: polygon is points, path is d.
maxSegmentLengthnumber0.5The lower the value, the smoother the generated animation will be, but at the expense of performance;

PathPlugin

import { Plugins } from 'rc-tween-one';
import PathMotionPlugin from 'rc-tween-one/es/plugin/PathMotionPlugin';
Plugins.push(PathMotionPlugin);

<TweenOne animation={{ PathMotion: { path: '300,10 500,200 120,230 450,220 0,20' }}} />
PathMotion API
nametypedefaultdescription
pathstring / {x,y}[]nullsvg path, ref: M0,0L100,0;
pathVarsIPathVarsnullOnly valid if path is array [{x, y}, {x, y}]
centernumber \ string[]['50%','50%']center point, ref: [50px, 50px];
xbooleantruex follow the path.
ybooleantruey follow the path.
rotatebooleantruerotate follow the path.
IPathVars
nametypedefaultdescription
typethru \ soft \ cubicthrupath type. thru same as the path; soft with the curve of attraction facing them, but not through the point; cubic allows you to define standard Cubic Bezier, example: [start, control, control, end].
curviness0-21This determines how "curvy" the resulting path is. 0 is lines, 1 is curved path, 2 would make it much more curvy. It can be 1.5.
relativebooleanfalseIncrease relative to current value. example: if the target's x starts at 100 and the path is [{x:5}, {x:10}, {x:-2}] , it would first move to 105, then 115, and finally end at 113.

ChildrenPlugin

Children = { value:, floatLength, formatMoney };
nametypedefaultdescription
valuenumbernullchildren number to value.
floatLengthnumbernullfloat precision length
formatMoneytrue \ { thousand, decimal }nullformat 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

Keywords

FAQs

Package last updated on 13 Apr 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc