{"id":13394642,"url":"https://github.com/recharts/react-smooth","last_synced_at":"2025-05-15T12:06:45.644Z","repository":{"id":3542455,"uuid":"50020457","full_name":"recharts/react-smooth","owner":"recharts","description":"react animation","archived":false,"fork":false,"pushed_at":"2025-04-19T12:26:57.000Z","size":1581,"stargazers_count":284,"open_issues_count":6,"forks_count":41,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-13T14:21:52.958Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/recharts.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-01-20T09:47:55.000Z","updated_at":"2025-05-07T10:40:25.000Z","dependencies_parsed_at":"2023-10-10T13:29:11.811Z","dependency_job_id":"4a17f68d-b7ba-466e-a22b-9d375a9f4457","html_url":"https://github.com/recharts/react-smooth","commit_stats":{"total_commits":211,"total_committers":20,"mean_commits":10.55,"dds":0.5924170616113744,"last_synced_commit":"3ad17a73f12171ebe10cb1ad48c3f234f696f94f"},"previous_names":["recharts/react-css-animation"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/recharts%2Freact-smooth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/recharts%2Freact-smooth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/recharts%2Freact-smooth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/recharts%2Freact-smooth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/recharts","download_url":"https://codeload.github.com/recharts/react-smooth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337613,"owners_count":22054253,"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":[],"created_at":"2024-07-30T17:01:26.680Z","updated_at":"2025-05-15T12:06:40.630Z","avatar_url":"https://github.com/recharts.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-smooth\n\nreact-smooth is a animation library work on React.\n\n[![npm version](https://badge.fury.io/js/react-smooth.png)](https://badge.fury.io/js/react-smooth)\n[![build status](https://travis-ci.org/recharts/react-smooth.svg)](https://travis-ci.org/recharts/react-smooth)\n[![npm downloads](https://img.shields.io/npm/dt/react-smooth.svg?style=flat-square)](https://www.npmjs.com/package/react-smooth)\n[![Gitter](https://badges.gitter.im/recharts/react-smooth.svg)](https://gitter.im/recharts/react-smooth?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\n## install\n```\nnpm install --save react-smooth\n```\n\n## Usage\nsimple animation\n\n```jsx\n\u003cAnimate to=\"0\" from=\"1\" attributeName=\"opacity\"\u003e\n  \u003cdiv /\u003e\n\u003c/Animate\u003e\n```\nsteps animation\n\n```jsx\nconst steps = [{\n  style: {\n    opacity: 0,\n  },\n  duration: 400,\n}, {\n  style: {\n    opacity: 1,\n    transform: 'translate(0, 0)',\n  },\n  duration: 1000,\n}, {\n  style: {\n    transform: 'translate(100px, 100px)',\n  },\n  duration: 1200,\n}];\n\n\u003cAnimate steps={steps}\u003e\n  \u003cdiv /\u003e\n\u003c/Animate\u003e\n```\nchildren can be a function\n\n```jsx\n\u003cAnimate from={{ opacity: 0 }}\n  to={{ opacity: 1 }}\n  easing=\"ease-in\"\n  \u003e\n  {\n    ({ opacity }) =\u003e \u003cdiv style={{ opacity }}\u003e\u003c/div\u003e\n  }\n\u003c/Animate\u003e\n```\n\nyou can configure js timing function\n\n```js\nconst easing = configureBezier(0.1, 0.1, 0.5, 0.8);\nconst easing = configureSpring({ stiff: 170, damping: 20 });\n```\n\ngroup animation\n\n```jsx\nconst appear = {\n  from: 0,\n  to: 1,\n  attributeName: 'opacity',\n};\n\nconst leave = {\n  steps: [{\n    style: {\n      transform: 'translateX(0)',\n    },\n  }, {\n    duration: 1000,\n    style: {\n      transform: 'translateX(300)',\n      height: 50,\n    },\n  }, {\n    duration: 2000,\n    style: {\n      height: 0,\n    },\n  }]\n}\n\n\u003cAnimateGroup appear={appear} leave={leave}\u003e\n  { list }\n\u003c/AnimateGroup\u003e\n\n/*\n *  @description: add compatible prefix in style\n *\n *  style = { transform: xxx, ...others };\n *\n *  translatedStyle = {\n *    WebkitTransform: xxx,\n *    MozTransform: xxx,\n *    OTransform: xxx,\n *    msTransform: xxx,\n *    ...others,\n *  };\n */\n\nconst translatedStyle = translateStyle(style);\n\n\n```\n\n## API\n\n### Animate\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 50px\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 100px\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px\"\u003edefault\u003c/th\u003e\n        \u003cth style=\"width: 50px\"\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003efrom\u003c/td\u003e\n          \u003ctd\u003estring or object\u003c/td\u003e\n          \u003ctd\u003e''\u003c/td\u003e\n          \u003ctd\u003eset the initial style of the children\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eto\u003c/td\u003e\n          \u003ctd\u003estring or object\u003c/td\u003e\n          \u003ctd\u003e''\u003c/td\u003e\n          \u003ctd\u003eset the final style of the children\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003ecanBegin\u003c/td\u003e\n          \u003ctd\u003eboolean\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n          \u003ctd\u003ewhether the animation is start\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003ebegin\u003c/td\u003e\n          \u003ctd\u003enumber\u003c/td\u003e\n          \u003ctd\u003e0\u003c/td\u003e\n          \u003ctd\u003eanimation delay time\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eduration\u003c/td\u003e\n          \u003ctd\u003enumber\u003c/td\u003e\n          \u003ctd\u003e1000\u003c/td\u003e\n          \u003ctd\u003eanimation duration\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003esteps\u003c/td\u003e\n          \u003ctd\u003earray\u003c/td\u003e\n          \u003ctd\u003e[]\u003c/td\u003e\n          \u003ctd\u003eanimation keyframes\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eonAnimationEnd\u003c/td\u003e\n          \u003ctd\u003efunction\u003c/td\u003e\n          \u003ctd\u003e() =\u003e null\u003c/td\u003e\n          \u003ctd\u003ecalled when animation finished\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eattributeName\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e''\u003c/td\u003e\n          \u003ctd\u003estyle property\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eeasing\u003c/td\u003e\n          \u003ctd\u003estring\u003c/td\u003e\n          \u003ctd\u003e'ease'\u003c/td\u003e\n          \u003ctd\u003ethe animation timing function, support css timing function temporary\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eisActive\u003c/td\u003e\n          \u003ctd\u003eboolean\u003c/td\u003e\n          \u003ctd\u003etrue\u003c/td\u003e\n          \u003ctd\u003ewhether the animation is active\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003echildren\u003c/td\u003e\n          \u003ctd\u003eelement\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003esupport only child temporary\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n### AnimateGroup\n\n\u003ctable class=\"table table-bordered table-striped animate-group\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 40px\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 40px\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 40px\"\u003edefault\u003c/th\u003e\n        \u003cth style=\"width: 100px\"\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eappear\u003c/td\u003e\n          \u003ctd\u003eobject\u003c/td\u003e\n          \u003ctd\u003eundefined\u003c/td\u003e\n          \u003ctd\u003econfigure element appear animation\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eenter\u003c/td\u003e\n          \u003ctd\u003eobject\u003c/td\u003e\n          \u003ctd\u003eundefined\u003c/td\u003e\n          \u003ctd\u003econfigure element appear animation\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eleave\u003c/td\u003e\n          \u003ctd\u003eobject\u003c/td\u003e\n          \u003ctd\u003eundefined\u003c/td\u003e\n          \u003ctd\u003econfigure element appear animation\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2015-2021 Recharts Group\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frecharts%2Freact-smooth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frecharts%2Freact-smooth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frecharts%2Freact-smooth/lists"}