{"id":16897772,"url":"https://github.com/behnammodi/reactima","last_synced_at":"2026-04-09T16:39:44.796Z","repository":{"id":172555324,"uuid":"649401871","full_name":"behnammodi/reactima","owner":"behnammodi","description":"Animation Library for React Projects","archived":false,"fork":false,"pushed_at":"2023-06-25T05:16:47.000Z","size":5267,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-22T15:33:02.369Z","etag":null,"topics":["animation","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/reactima","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/behnammodi.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}},"created_at":"2023-06-04T18:19:57.000Z","updated_at":"2023-06-04T21:05:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"a4997932-8c2f-4531-aa52-982df4fdca41","html_url":"https://github.com/behnammodi/reactima","commit_stats":{"total_commits":55,"total_committers":1,"mean_commits":55.0,"dds":0.0,"last_synced_commit":"6776f296bc280aded81e475d7495187d404ededc"},"previous_names":["behnammodi/reactima"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Freactima","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Freactima/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Freactima/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/behnammodi%2Freactima/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/behnammodi","download_url":"https://codeload.github.com/behnammodi/reactima/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242975426,"owners_count":20215457,"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":["animation","react"],"created_at":"2024-10-13T17:39:46.215Z","updated_at":"2026-04-09T16:39:44.747Z","avatar_url":"https://github.com/behnammodi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Reactima: Animation Library for React Projects\n\nHere are some basic example showcasing the usage of `reactima` in a React project:\n\n## The basic example:\n\nhttps://codesandbox.io/p/sandbox/yinnjk\n\nIn this example, we have implemented an animation where a card component moves from the left side to the right side. The animation begins with the card's opacity at 0 and gradually increases it to 1.\n\n```jsx\n\u003cAnimation\n  duration={500}\n  keyframes={[\n  { opacity: 0, transform: \"translateX(0px)\" },\n  { opacity: 1, transform: \"translateX(500px)\" },\n]}\u003e\n  \u003cCard /\u003e\n\u003c/Animation\u003e\n```\n\nThe card component remains unchanged in this example and only requires `forwardRed` to function properly.\n\n\n## Infinity animation example:\n\nhttps://codesandbox.io/p/sandbox/b9njfx\n\nIn this example, we have implemented an animation where a card component continuously rotates. We achieve this effect by using the `iterations` prop with a value of `Infinity`.\n\n```jsx\n\u003cAnimation\n  duration={1000}\n  iterations={Infinity}\n  keyframes={[\n    { transform: \"rotate(0turn)\" },\n    { transform: \"rotate(1turn)\" },\n]}\u003e\n  \u003cCard /\u003e\n\u003c/Animation\u003e\n```\n\n## Animation composition exmple:\n\nhttps://codesandbox.io/p/sandbox/0rm9xk\n\nHere is an example showcasing the composition of multiple animations with different configurations. In this example, we combine multiple animations to create a complex effect. By combining multiple animations in this way, you can create more intricate and dynamic effects\n\n```jsx\n\u003cAnimation\n  duration={2000}\n  iterations={Infinity}\n  keyframes={[\n    { borderRadius: 0, transform: \"scale(0) rotate(0turn)\" },\n    { borderRadius: \"50%\", transform: \"scale(1) rotate(1turn)\" },\n]}\u003e\n  \u003cAnimation\n    duration={1000}\n    iterations={Infinity}\n    keyframes={[{ backgroundColor: \"red\" }, { backgroundColor: \"blue\" }]}\n  \u003e\n    \u003cCard /\u003e\n  \u003c/Animation\u003e\n\u003c/Animation\u003e\n```\n\n## Interactively Controlled Animation example:\n\nhttps://codesandbox.io/p/sandbox/o1mplp\n\nHere is an example that demonstrates how to animate a card based on a mount and unmount interaction. In this example, the card animation is controlled by a `show` flag that determines whether the card should be displayed or hidden. When the `show` flag is `true`, the card is mounted and animated using the specified keyframes.\n\n```jsx\nconst [show, setShow] = useState(false);\n\n\u003cAnimation\n  duration={500}\n  fill=\"both\"\n  direction={show ? \"normal\" : \"reverse\"}\n  keyframes={[\n    { opacity: 0, transform: \"translateX(0px)\" },\n    { opacity: 1, transform: \"translateX(500px)\" },\n  ]}\n\u003e\n  {show \u0026\u0026 \u003cCard /\u003e}\n\u003c/Animation\u003e\n```\n\nInside the Animation component, fill is set to \"both\" to maintain the final state of the animation. The direction property is dynamically controlled by the show flag. When show is true, the animation plays in the normal direction. \n\n## Keyframes\nKeyframes can be defined as an object where each property represents a CSS property and its corresponding values. For example:\n```js\nkeyframes={{\n  opacity: [0, 1],\n  transform: ['translateX(0px)', 'translateX(500px)']\n]}\n```\n\nMultiple values can also be passed for a property to create more complex animations. For instance:\n```js\nkeyframes={{\n  opacity: [0, 1], // offset: 0, 1\n  transform: ['translateX(0px)', 'translateX(20px)','translateX(500px)'], // offset: 0, 0.5, 1\n]}\n\n```\n\nFor more details, please refer to the MDN documentation on keyframe formats:\nhttps://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats\n\n\n## How to use it:\n\nInstall:\n```bash\nnpm install reactima\n# or\nyard add reactima\n```\n\nImport:\n```js\nimport Animation from 'reactima';\n```\n\n## Other exmaples:\n\nReactima with styled-components:\n\nhttps://codesandbox.io/p/sandbox/b5dr16\n\n## Size:\nLess than 1kB:\n\nhttps://bundlephobia.com/package/reactima\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbehnammodi%2Freactima","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbehnammodi%2Freactima","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbehnammodi%2Freactima/lists"}