npmpackage.info

Gathering detailed insights and metrics for rc-tween-one

rc-tween-one - 3.0.6 | npmpackage.info

rc-tween-one

Animate One React Element

3.0.6

382

MIT

TypeScript

74.87 kB

3.4

Installations

npm install rc-tween-one

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Min. Node Version

>=8.x

Node Version

14.19.1

NPM Version

6.14.16 Pull Requests

Open

5

Total

88

Closed

62

Merged

21

Issues

Open

6

Total

50

Closed

44

Releases

3.0.0

v3.0.0

Updated on Nov 02, 2021

v3.0.0-beta.x

Updated on Nov 27, 2020

v1.3.0

1.3.0

Updated on Jul 18, 2017

v1.2.0

1.2.0

Updated on Apr 12, 2017

v0.10.0

0.10.0

Updated on Oct 28, 2016

0.6.23

Updated on Jul 19, 2016

View All 6 releases

Languages

TypeScript

JavaScript

Less

TypeScript (56.39%)

JavaScript (43.59%)

Less (0.02%)

Developer

react-component

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

382 Stars

535 Commits

35 Forks

16 Watchers

7 Branches

29 Contributors

Updated on Jun 30, 2025

Maintainers

View All 29 Contributors

Package Meta Information

Latest Version

3.0.6

Package Id

rc-tween-one@3.0.6

Unpacked Size

74.87 kB

Size

15.42 kB

File Count

NPM Version

6.14.16

Node Version

14.19.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@babel/runtime style-utils tween-one

Peer Dependencies

react react-dom

Dev Dependencies

rc-tween-one

React TweenOne Component

Browser Support


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

Usage

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

Plugin

1var TweenOne = require('rc-tween-one');
2var React = require('react');
3var SvgDrawPlugin = require('rc-tween-one/lib/plugin/SvgDrawPlugin');
4TweenOne.plugins.push(SvgDrawPlugin);
5React.render(<svg width="600" height="600">
6  <TweenOne 
7    animation={{ SVGDraw:'50%'}}
8    d="M0,0L100,0"
9    style={{ fill: 'none', strokeWidth: 20, stroke: '#00000' }}
10    component="path"
11  />
12</svg>, container);

TweenOneGroup

1var TweenOne = require('rc-tween-one');
2var React = require('react');
3var TweenOneGroup = TweenOne.TweenOneGroup;
4React.render(<TweenOneGroup>
5  <div key="0">demo</div>
6  <div key="1">demo</div>
7</TweenOneGroup>, container);

API

中文文档

props

name	type	default	description
animation	object / array	null	animate configure parameters
paused	boolean	false	animate timeline pause
reverse	boolean	false	animate timeline revers
delay	number	0	animate timeline delay
repeat	number	0	`animation` all data repeat, To repeat indefinitely, use -1
repeatDelay	number	0	animate timeline repeat delay
yoyo	boolean	false	`animation` all data alternating backward and forward on each repeat.
onChange	func	null	when the animation change called, callback({ moment, targets, index, mode, ratio, vars, index, repeat })
onChangeTimeline	func	null	when the animation change called, callback({ mode, targets, vars, moment, totalTime, repeat })
moment	number	null	set the current frame
regionStartTime	number	0	Set the start time of the animation region
regionEndTime	number	null	Set the end time of the animation region
attr	boolean	false	attribute animation is `true`, when morph SVG must be `true`.
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
[key: string]	`string` `number` `array`	null	All variables based on number, such as left, x, color, shadow
type	string	`to`	play type: `to` `from` `set`
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	`easeInOutQuad`	animate ease refer or svg path `M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0`
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, targets, ratio }
onComplete	func	null	A function that should be called when the animate has completed, callback(e), e: { index, targets }
onRepeat	func	null	A 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

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

Plugins

SvgDrawPlugin

1import { Plugins } from 'rc-tween-one';
2import SvgDrawPlugin from 'rc-tween-one/es/plugin/SvgDrawPlugin';
3Plugins.push(SvgDrawPlugin);
4
5<TweenOne animation={{ SVGDraw: '10%' }} />

SVGDraw = string or number;

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

SvgMorphPlugin

1import { Plugins } from 'rc-tween-one';
2import SvgMorphPlugin from 'rc-tween-one/es/plugin/SvgMorphPlugin';
3Plugins.push(SvgMorphPlugin);
4
5<TweenOne animation={{ SVGMorph: { path: '300,10 500,200 120,230 450,220 0,20' }}} />

SvgMorphPlugin API

name	type	default	description
path	string	null	svg path, ref: `M0,0L100,0`;
attr	string	null	Svg tag attributes, example: `polygon` is `points`, `path` is `d`.
maxSegmentLength	number	0.5	The lower the value, the smoother the generated animation will be, but at the expense of performance;

PathPlugin

1import { Plugins } from 'rc-tween-one';
2import PathMotionPlugin from 'rc-tween-one/es/plugin/PathMotionPlugin';
3Plugins.push(PathMotionPlugin);
4
5<TweenOne animation={{ PathMotion: { path: '300,10 500,200 120,230 450,220 0,20' }}} />

PathMotion API

name	type	default	description
path	string / {x,y}[]	null	svg path, ref: `M0,0L100,0`;
pathVars	IPathVars	null	Only valid if path is array `[{x, y}, {x, y}]`
center	`number \ string[]`	`['50%','50%']`	center point, ref: `[50px, 50px]`;
x	boolean	true	x follow the path.
y	boolean	true	y follow the path.
rotate	boolean	true	rotate follow the path.

IPathVars

name	type	default	description
type	`thru \ soft \ cubic`	`thru`	path 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]`.
curviness	0-2	1	This 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`.
relative	boolean	false	Increase 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 };

name	type	default	description
value	number	null	children number to value.
floatLength	number	null	float precision length
formatMoney	`true` \ { thousand, decimal }	null	format number to money.

formatMoney = { thousand, decimal }

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

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

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:73: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:82: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:96: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:99: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:105: update your workflow using https://app.stepsecurity.io/secureworkflow/react-component/tween-one/main.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/main.yml:28
Warn: downloadThenRun not pinned by hash: .github/workflows/main.yml:112
Info: 0 out of 13 GitHub-owned GitHubAction dependencies pinned
Info: 1 out of 2 npmCommand dependencies pinned
Info: 0 out of 1 downloadThenRun dependencies pinned

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

3.4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More