Installations
npm install rc-tween-oneDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=8.x
Node Version
14.19.1
NPM Version
6.14.16
Score
91.7
Supply Chain
94
Quality
77.7
Maintenance
100
Vulnerability
98.4
License
Releases
6
Contributors
29
Unable to fetch Contributors
Languages
3
TypeScript
JavaScript
Less
TypeScript (56.39%)
JavaScript (43.59%)
Less (0.02%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
8,267,144
Last Day
8,604
Last Week
54,438
Last Month
205,447
Last Year
1,618,423
GitHub Statistics
MIT License
382 Stars
535 Commits
32 Forks
17 Watchers
7 Branches
29 Contributors
Updated on Jan 11, 2025
Bundle Size
154.98 kB
Minified
51.36 kB
Minified + Gzipped
Maintainers
2
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
49
NPM Version
6.14.16
Node Version
14.19.1
Total Downloads
Cumulative downloads
Total Downloads
8,267,144
Last Day
8.6%
8,604
Compared to previous day
Last Week
45.6%
54,438
Compared to previous week
Last Month
-1%
205,447
Compared to previous month
Last Year
28.1%
1,618,423
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
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
reverseandrepeat: -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.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 1/19 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Info: no jobLevel write permissions found
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
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 13 are checked with a SAST tool
Score
3.4
/10
Last Scanned on 2025-02-03
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