{"id":13469726,"url":"https://github.com/beekai-oss/react-simple-animate","last_synced_at":"2025-05-14T09:07:13.757Z","repository":{"id":23315375,"uuid":"98698673","full_name":"beekai-oss/react-simple-animate","owner":"beekai-oss","description":"🎯 React UI animation made easy","archived":false,"fork":false,"pushed_at":"2024-12-16T10:49:53.000Z","size":2705,"stargazers_count":1826,"open_issues_count":3,"forks_count":61,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-10T05:16:10.649Z","etag":null,"topics":["animate","animate-css","animation","animation-controller","animation-sequence","keyframes-animation","react","transition-animation"],"latest_commit_sha":null,"homepage":"https://react-simple-animate.now.sh/","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/beekai-oss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":"bluebill1049","patreon":"bluebill1049"}},"created_at":"2017-07-29T00:54:19.000Z","updated_at":"2025-03-28T18:41:31.000Z","dependencies_parsed_at":"2024-10-01T16:16:29.542Z","dependency_job_id":"158890ce-3ab9-41cc-9c63-9e52388ad10c","html_url":"https://github.com/beekai-oss/react-simple-animate","commit_stats":{"total_commits":422,"total_committers":28,"mean_commits":"15.071428571428571","dds":0.2725118483412322,"last_synced_commit":"e4073dfa32b58bba82aa5b52ea5865a11b8a91d9"},"previous_names":["bluebill1049/react-simple-animation","bluebill1049/react-simple-animate"],"tags_count":124,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beekai-oss%2Freact-simple-animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beekai-oss%2Freact-simple-animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beekai-oss%2Freact-simple-animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beekai-oss%2Freact-simple-animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beekai-oss","download_url":"https://codeload.github.com/beekai-oss/react-simple-animate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248182077,"owners_count":21060893,"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","animate-css","animation","animation-controller","animation-sequence","keyframes-animation","react","transition-animation"],"created_at":"2024-07-31T15:01:53.012Z","updated_at":"2025-04-11T16:39:22.681Z","avatar_url":"https://github.com/beekai-oss.png","language":"TypeScript","funding_links":["https://github.com/sponsors/bluebill1049","https://patreon.com/bluebill1049"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\u003cp align=\"center\"\u003e\u003ca href=\"https://react-simple-animate.now.sh\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/bluebill1049/react-simple-animate/master/logo.png\" alt=\"React Simple Animate Logo - UI Animation Made Simple\" width=\"140px\" /\u003e\u003c/a\u003e\u003c/p\u003e\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eReact Simple Animate\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eReact UI animation made easy\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \n[![npm downloads](https://img.shields.io/npm/dm/react-simple-animate.svg?style=for-the-badge)](https://www.npmjs.com/package/react-simple-animate) \n[![npm](https://img.shields.io/npm/dt/react-simple-animate.svg?style=for-the-badge)](https://www.npmjs.com/package/react-simple-animate) \n[![npm](https://img.shields.io/bundlephobia/minzip/react-simple-animate?style=for-the-badge)](https://bundlephobia.com/result?p=react-simple-animate)\n[![Coverage Status](https://img.shields.io/coveralls/github/bluebill1049/react-simple-animate/master?style=for-the-badge)](https://coveralls.io/github/bluebill1049/react-simple-animate?branch=master)\n\n\u003c/div\u003e\n\n## Features\n\n- Animation from style A to B\n- CSS keyframes animation\n- Chain up animation sequences\n- Tiny size without other dependency\n\n## Install\n\n    $ npm install react-simple-animate\n\n## [Docs](https://react-simple-animate.now.sh/)\n\n- [Getting started](https://react-simple-animate.now.sh/basics)\n- [Animate](https://react-simple-animate.now.sh/animate)\n- [AnimateKeyframes](https://react-simple-animate.now.sh/animate-keyframes)\n- [AnimateGroup](https://react-simple-animate.now.sh/animate-group)\n- [Custom Hooks](https://react-simple-animate.now.sh/hooks)\n- [Advanced](https://react-simple-animate.now.sh/advanced)\n\n## Quickstart\n\n#### Components\n\n```jsx\nimport React from \"react\";\nimport { Animate, AnimateKeyframes, AnimateGroup } from \"react-simple-animate\";\n\nexport default () =\u003e (\n  \u003c\u003e\n    {/* animate individual element. */}\n    \u003cAnimate play start={{ opacity: 0 }} end={{ opacity: 1 }}\u003e\n      \u003ch1\u003eReact simple animate\u003c/h1\u003e\n    \u003c/Animate\u003e\n    \n    {/* animate keyframes with individual element. */}\n    \u003cAnimateKeyframes\n      play\n      iterationCount=\"infinite\"\n      keyframes={[\"opacity: 0\", \"opacity: 1\"]}\n    \u003e\n      \u003ch1\u003eReact simple animate with keyframes\u003c/h1\u003e\n    \u003c/AnimateKeyframes\u003e\n    \n    {/* animate group of animation in sequences */}\n    \u003cAnimateGroup play\u003e\n      \u003cAnimate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}\u003e\n        first\n      \u003c/Animate\u003e\n      \u003cAnimate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={1}\u003e\n        second\n      \u003c/Animate\u003e\n      \u003cAnimate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={2}\u003e\n        third\n      \u003c/Animate\u003e\n    \u003c/AnimateGroup\u003e\n  \u003c/\u003e\n);\n\n```\n\n#### Hooks\n\n```jsx\nimport react from 'react';\nimport { useAnimate, useAnimateKeyframes, useAnimateGroup } from 'react-simple-animate';\n\nexport const useAnimateExample = () =\u003e {\n  const { style, play } = useAnimate({ start: { opacity: 0 }, end: { opacity: 1 } });\n  useEffect(() =\u003e play(true), []);\n  \n  return \u003cdiv style={style}\u003euseAnimate\u003c/div\u003e;\n};\n\nexport const useAnimateKeyframesExample = () =\u003e {\n  const { style, play } = useAnimateKeyframes({ \n    keyframes: ['opacity: 0', 'opacity: 1'], \n    iterationCount: 4 \n  });\n  useEffect(() =\u003e play(true), []);\n  \n  return \u003cdiv style={style}\u003euseAnimate\u003c/div\u003e;\n};\n\nexport const useAnimateGroup = () =\u003e {\n  const { styles = [], play } = useAnimateGroup({\n    sequences: [\n      { start: { opacity: 1 }, end: { opacity: 0 } },\n      { start: { background: \"red\" }, end: { background: \"blue\" } }\n    ]\n  });\n  useEffect(() =\u003e play(true), []);\n\n  return {styles.map(style =\u003e \u003cdiv style={style}\u003euseAnimateGroup\u003c/div\u003e)};\n};\n```\n\n## By the makers of BEEKAI\n\nWe also make [BEEKAI](https://www.beekai.com/). Build the next-generation forms with modern technology and best in class user experience and accessibility.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeekai-oss%2Freact-simple-animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeekai-oss%2Freact-simple-animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeekai-oss%2Freact-simple-animate/lists"}