{"id":13455681,"url":"https://github.com/react-component/tween-one","last_synced_at":"2025-05-15T18:04:58.123Z","repository":{"id":3077647,"uuid":"48370597","full_name":"react-component/tween-one","owner":"react-component","description":"Animate One React Element","archived":false,"fork":false,"pushed_at":"2022-04-13T12:23:45.000Z","size":14039,"stargazers_count":382,"open_issues_count":11,"forks_count":33,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-31T22:17:19.337Z","etag":null,"topics":["animate","animation","motion","rc-animate","rc-animation","rc-motion","rc-tween","react","react-component","tween"],"latest_commit_sha":null,"homepage":"https://tween-one.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-component.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-21T12:28:15.000Z","updated_at":"2025-01-11T19:15:31.000Z","dependencies_parsed_at":"2022-09-17T05:20:23.989Z","dependency_job_id":null,"html_url":"https://github.com/react-component/tween-one","commit_stats":null,"previous_names":[],"tags_count":204,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Ftween-one","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Ftween-one/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Ftween-one/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Ftween-one/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-component","download_url":"https://codeload.github.com/react-component/tween-one/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345849,"owners_count":20924102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animate","animation","motion","rc-animate","rc-animation","rc-motion","rc-tween","react","react-component","tween"],"created_at":"2024-07-31T08:01:09.285Z","updated_at":"2025-04-07T23:07:22.937Z","avatar_url":"https://github.com/react-component.png","language":"TypeScript","readme":"\n# rc-tween-one\n---\n\nReact TweenOne Component\n\n\n[![NPM version][npm-image]][npm-url]\n[![build status][github-actions-image]][github-actions-url]\n[![Codecov][codecov-image]][codecov-url]\n[![node version][node-image]][node-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: http://img.shields.io/npm/v/rc-tween-one.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/rc-tween-one\n[github-actions-image]: https://github.com/react-component/tween-one/workflows/CI/badge.svg\n[github-actions-url]: https://github.com/react-component/tween-one/actions\n[codecov-image]: https://img.shields.io/codecov/c/github/react-component/tween-one/master.svg?style=flat-square\n[codecov-url]: https://codecov.io/gh/react-component/tween-one/branch/master\n[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square\n[node-url]: http://nodejs.org/download/\n[download-image]: https://img.shields.io/npm/dm/rc-tween-one.svg?style=flat-square\n[download-url]: https://npmjs.org/package/rc-tween-one\n\n\n## Browser Support\n\n|![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true)|\n| --- | --- | --- | --- | --- |\n| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |\n\n## Development\n\n```\nnpm install\nnpm start\n```\n\n## Example\n\nhttp://localhost:8100/examples/\n\n2.x: http://react-component.github.io/tween-one/\n\n3.x: https://tween-one.vercel.app/\n\n## install\n\n\n[![rc-tween-one](https://nodei.co/npm/rc-tween-one.png)](https://npmjs.org/package/rc-tween-one)\n\n\n## Usage\n\n```js | pure\nvar TweenOne = require('rc-tween-one');\nvar React = require('react');\nReact.render(\u003cTweenOne animation={{x:100}}\u003e\n  demo\n\u003c/TweenOne\u003e, container);\n```\n\n### Plugin\n\n```js | pure\nvar TweenOne = require('rc-tween-one');\nvar React = require('react');\nvar SvgDrawPlugin = require('rc-tween-one/lib/plugin/SvgDrawPlugin');\nTweenOne.plugins.push(SvgDrawPlugin);\nReact.render(\u003csvg width=\"600\" height=\"600\"\u003e\n  \u003cTweenOne \n    animation={{ SVGDraw:'50%'}}\n    d=\"M0,0L100,0\"\n    style={{ fill: 'none', strokeWidth: 20, stroke: '#00000' }}\n    component=\"path\"\n  /\u003e\n\u003c/svg\u003e, container);\n```\n\n### TweenOneGroup\n```js | pure\nvar TweenOne = require('rc-tween-one');\nvar React = require('react');\nvar TweenOneGroup = TweenOne.TweenOneGroup;\nReact.render(\u003cTweenOneGroup\u003e\n  \u003cdiv key=\"0\"\u003edemo\u003c/div\u003e\n  \u003cdiv key=\"1\"\u003edemo\u003c/div\u003e\n\u003c/TweenOneGroup\u003e, container);\n```\n\n## API\n\n\u003ca href='https://motion.ant.design/api/tween-one' target='_blank'\u003e中文文档\u003c/a\u003e\n\n### props\n\n| name      | type           | default | description    |\n|------------|----------------|---------|----------------|\n| animation  | object / array | null    | animate configure parameters |\n| paused      | boolean       | false   | animate timeline pause |\n| reverse    | boolean        | false   | animate timeline revers |\n| delay      | number          | 0       | animate timeline delay |      \n| repeat     |  number        | 0       | `animation` all data repeat, To repeat indefinitely, use  -1 |\n| repeatDelay | number       | 0       | animate timeline repeat delay |\n| yoyo       | boolean        | false   | `animation` all data alternating backward and forward on each repeat. |\n| onChange   | func           | null    | when the animation change called, callback({ moment, targets, index, mode, ratio, vars, index, repeat }) |\n| onChangeTimeline   | func           | null    | when the animation change called, callback({ mode, targets, vars, moment, totalTime, repeat }) |\n| moment     | number         | null    | set the current frame    |\n| regionStartTime  | number           | 0       | Set the start time of the animation region  |\n| regionEndTime    | number         | null    | Set the end time of the animation region   |\n| attr       | boolean         | false | attribute animation is `true`, when morph SVG must be `true`.  |\n| resetStyle | boolean    | false   | update animation data, reset init style |\n| component  | string / React.Element  | `div`   | component tag  |\n| componentProps | object     | null   | component is React.Element, component tag props, not add `style` |\n\n\n### animation = { }\n\n\u003e Basic animation param. please view [animation terms](https://motion.ant.design/language/animate-term)\n\n| name      | type           | default | description    |\n|------------|----------------|---------|----------------|\n| [key: string] | `string` `number` `array` | null | All variables based on number, such as left, x, color, shadow  |\n| type       | string         | `to`    | play type: `to` `from` `set`|\n| duration   |  number        | 450     | animate duration     |\n| delay      | number         | 0       | animate delay  |\n| repeat     | number         | 0       | animate repeat, To repeat indefinitely, use  -1 |\n| repeatDelay| number         | 0       | repeat start delay |\n| appearTo   | number         | null    | Add to the specified time |\n| yoyo       | boolean        | false   | `true`: alternating backward and forward on each repeat. |\n| ease       | string         | `easeInOutQuad` | animate ease [refer](http://easings.net/en) or svg path `M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0`  |\n| bezier     | object         | null    | bezier curve animate |\n| onStart    | func           | null    | A function that should be called when the tween begins, callback(e), e: { index, target }  |\n| onUpdate   | func           | null    | A function that should be called every time the animate updates, callback(e), e: { index, targets,  ratio }   |\n| onComplete | func           | null    | A function that should be called when the animate has completed, callback(e), e: { index, targets }  |\n| onRepeat   | func           | null    | A function that should be called each time the animate repeats, callback(e), e: { index, targets }  |\n\n\u003e Cannot be used at the same time `reverse` and `repeat: -1`.\n\n### animation =[ ] is timeline\n```js | pure\n\u003cTweenOne animation={[{ x: 100 }, { y: 100 }]} /\u003e\n```\n## Plugins\n### SvgDrawPlugin\n\n```js | pure\nimport { Plugins } from 'rc-tween-one';\nimport SvgDrawPlugin from 'rc-tween-one/es/plugin/SvgDrawPlugin';\nPlugins.push(SvgDrawPlugin);\n\n\u003cTweenOne animation={{ SVGDraw: '10%' }} /\u003e\n```\n\nSVGDraw = string or number;\n\n{ SVGDraw: 30 } or { SVGDraw: 'start end' } start and end values can be `%`;\n\n### SvgMorphPlugin\n\n```js | pure\nimport { Plugins } from 'rc-tween-one';\nimport SvgMorphPlugin from 'rc-tween-one/es/plugin/SvgMorphPlugin';\nPlugins.push(SvgMorphPlugin);\n\n\u003cTweenOne animation={{ SVGMorph: { path: '300,10 500,200 120,230 450,220 0,20' }}} /\u003e\n```\n#### SvgMorphPlugin API\n\n| name             | type   | default | description    |\n|------------------|--------|---------|----------------|\n| path             | string | null    | svg path, ref: `M0,0L100,0`;|\n| attr             | string | null    | Svg tag attributes, example: `polygon` is ` points`, `path` is `d`. |\n| maxSegmentLength | number | 0.5     | The lower the value, the smoother the generated animation will be, but at the expense of performance;|\n\n\n### PathPlugin\n\n```js | pure\nimport { Plugins } from 'rc-tween-one';\nimport PathMotionPlugin from 'rc-tween-one/es/plugin/PathMotionPlugin';\nPlugins.push(PathMotionPlugin);\n\n\u003cTweenOne animation={{ PathMotion: { path: '300,10 500,200 120,230 450,220 0,20' }}} /\u003e\n```\n#### PathMotion API\n\n| name   | type                | default         | description                   |\n| ------ | ------------------- | --------------- | ----------------------------- |\n| path   | string / {x,y}[]           | null            | svg path, ref: `M0,0L100,0`; |\n| pathVars | IPathVars | null | Only valid if path is array `[{x, y}, {x, y}]` |\n| center | `number \\ string[]` | `['50%','50%']` | center point, ref: `[50px, 50px]`;   |\n| x      | boolean             | true            | x follow the path.               |\n| y      | boolean             | true            | y follow the path.               |\n| rotate | boolean             | true            | rotate follow the path.          |\n\n##### IPathVars\n| name   | type                | default         | description                   |\n| ------ | ------------------- | --------------- | ----------------------------- |\n| 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]`.  |\n| 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`.  |\n| 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`. |\n\n### ChildrenPlugin\n\n#### Children = { value:, floatLength, formatMoney };\n\n| name | type | default | description |\n|---|---|---|---|\n| value | number | null | children number to value. |\n| floatLength | number | null | float precision length |\n| formatMoney | `true` \\ { thousand, decimal } | null | format number to money. |\n\n#### formatMoney = { thousand, decimal }\n\n| name | type | default | description |\n|---|---|---|---|\n| thousand | string | `,` | no explanation. |\n| decimal  | string | `.` | no explanation. |\n\n## TweenOneGroup\n\n| name      | type           | default | description    |\n|------------|----------------|---------|----------------|\n| appear    |  boolean       |  true   |  whether support appear anim |\n| 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  |\n| leave     | object / array / func | `{ x: 30, opacity: 0 }` | leave anim twee-one data. when array is tween-one timeline, func refer to queue-anim  |\n| onEnd     |  func          | -    | one animation end callback |\n| animatingClassName | array | `['tween-one-entering', 'tween-one-leaving']` | className to every element of animating |\n| resetStyle  |  boolean    | true | TweenOne resetStyle, reset the initial style when changing animation. |\n| exclusive   |  boolean   | false  | Whether to allow a new animate to execute immediately when switching. `enter =\u003e leave`: execute immediately leave |\n| component | \tReact.Element/String | div  |  component tag  | \n| componentProps | object  |  -  | component tag props |\n","funding_links":[],"categories":["UI Animation","TypeScript"],"sub_categories":["GraphQL"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Ftween-one","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-component%2Ftween-one","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Ftween-one/lists"}