{"id":19755238,"url":"https://github.com/paramsinghvc/react-anime","last_synced_at":"2025-04-30T11:32:37.926Z","repository":{"id":36320044,"uuid":"223385466","full_name":"paramsinghvc/react-anime","owner":"paramsinghvc","description":"React wrapper component \u003cAnime /\u003e for animejs","archived":false,"fork":false,"pushed_at":"2023-01-07T12:02:08.000Z","size":1090,"stargazers_count":19,"open_issues_count":16,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-28T22:15:00.557Z","etag":null,"topics":["animation","animejs","javascript","npm","react","typescript","web","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@mollycule/react-anime","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/paramsinghvc.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-11-22T11:01:07.000Z","updated_at":"2023-02-13T06:12:28.000Z","dependencies_parsed_at":"2023-01-17T01:17:18.869Z","dependency_job_id":null,"html_url":"https://github.com/paramsinghvc/react-anime","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paramsinghvc%2Freact-anime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paramsinghvc%2Freact-anime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paramsinghvc%2Freact-anime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paramsinghvc%2Freact-anime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paramsinghvc","download_url":"https://codeload.github.com/paramsinghvc/react-anime/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224208083,"owners_count":17273674,"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","animejs","javascript","npm","react","typescript","web","webpack"],"created_at":"2024-11-12T03:09:43.112Z","updated_at":"2024-11-12T03:09:43.642Z","avatar_url":"https://github.com/paramsinghvc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- PROJECT SHIELDS --\u003e\n\n[![Build Status][build-shield]]()\n[![MIT License][license-shield]][license-url]\n[![Contributors][contributors-shield]]()\n\u003cimg src=\"https://img.badgesize.io/paramsinghvc/react-anime/master/dist/index.js?compression=gzip\u0026label=gzip+size\u0026max=3000\u0026softmax=2000\u0026style=for-the-badge\"\u003e\n[![LinkedIn][linkedin-shield]][linkedin-url]\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/paramsinghvc/react-anime\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/4329912/69420951-d115e900-0d45-11ea-955e-476fdd43a44f.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align=\"center\"\u003eReact wrapper component \u0026lt;Anime /\u0026gt; for animejs\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n    Usher life to your React Apps easily\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@mollycule/react-anime\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href=\"https://codesandbox.io/s/react-anime-demo-mppmx?fontsize=14\"\u003eView Demo\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/paramsinghvc/react-anime/issues\"\u003eReport Bug\u003c/a\u003e\n    ·\n    \u003ca href=\"https://github.com/paramsinghvc/react-anime/issues\"\u003eRequest Feature\u003c/a\u003e\n    .\n    \u003ca href=\"https://www.npmjs.com/package/@mollycule/react-anime\"\u003eNPM Link\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\n## Table of Contents\n\n- [About the Project](#about-the-project)\n  - [Built With](#built-with)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n- [Usage](#usage)\n- [Contributing](#contributing)\n- [License](#license)\n- [Contact](#contact)\n- [Acknowledgements](#acknowledgements)\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n\n## About The Project\n\n[![Product Name Screen Shot][product-screenshot]](https://example.com)\n\n[AnimeJS](https://animejs.com) has a lot to offer when to comes to do performant and literally any kind of animations possible with svg and Javascript. It supports everything from simple graphic transformations like translations, rotation, scaling to complex things like SVG morphing in a very concise api. \n\nReact Anime library is a way of incorporating these benefits of animejs in a react environment easily by simply using \u0026lt;Anime /\u0026gt; element passing in the transformation configs as props to various React Transition hooks.\n\nReact Anime leverages the [React Transition Group](http://reactcommunity.org/react-transition-group/transition) API to run animations during various phases of React component like mounting and unmounting, which otherwise wouldn't have been possible.\n\n### Built With\n\n- [TypeScript](https://www.typescriptlang.org/)\n- [Webpack](https://webpack.js.org/)\n- [React Transition Group](http://reactcommunity.org/react-transition-group/transition)\n- [AnimeJS](https://animejs.com)\n\n\u003c!-- GETTING STARTED --\u003e\n\n## Getting Started\n\n### Prerequisites\n\nFollowing Peer Dependencies are required for using redux-hooks package:\n\n- react: ^16.8.0,\n- react-transition-group: ^4.3.0,\n- animejs: ^3.1.0\n\n### Installation\n\n```sh\n# Install the Peer Dependencies\nnpm i react react-transition-group animejs -S\n\n# Install the typings if using a TS environment\nnpm i @types/react-transition-group @types/animejs -S\n\nnpm i @mollycule/react-anime -S\n```\n\nor \n\n\n```sh\nyarn add react react-transition-group animejs\nyarn add @types/react-transition-group @types/animejs\nyarn add @mollycule/react-anime -S\n```\n\n\u003c!-- USAGE EXAMPLES --\u003e\n\n## Usage\n\n### 1. Single Element Animation\n\n```tsx\nimport Anime from \"@mollycule/react-anime\";\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cmain\u003e\n        \u003cAnime\n          in\n          appear\n          duration={1000}\n          onEntering={{ translateY: [-20, 0], opacity: [0, 1] }}\n          onExiting={{ translateY: -20, opacity: 0 }}\n          easing=\"easeOutCubic\"\n        \u003e\n          \u003csection\u003e\n            \u003cp\u003e Hola Mundo \u003c/p\u003e\n          \u003c/section\u003e\n        \u003c/Anime\u003e\n      \u003c/main\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\nBelow is the explanation of all the props being passed.\n\n1. **`in`**: It's used to tell animejs when to start the animation. You can pass a reactive prop to it to run it on a state prop change. \n2. **`mountOnEnter`**: By default component will be mounted only when animation starts or when `in` becomes true. It can controlled through this prop.\n3. **`unmountOnExit`**: By default component will be unmounted when animation exits or when `in` becomes false. It can controlled through this prop.\n4. **`appear`**: Normally the child inside \u0026lt;Anime\u0026gt; doesn't animate when it's mounted along with \u0026lt;Anime\u0026gt; as `in` set as true. Setting **`appear`** to true is important to view the child element transition or animate while mounting along with \u0026lt;Anime\u0026gt;. Read more [here](http://reactcommunity.org/react-transition-group/transition)\n5. **`onEntering`**, **`onEntered`**, **`onExiting`**, **`onExited`**: All these props take [anime props](https://animejs.com/documentation/) config object in them that are executed on various phases of React Transition.\n6. Any anime props that can be passed into each of these props above can be given at the root level as well. For eg: `duration` can be specified at \u0026lt;Amime duration={2000} \u0026gt; level than at each `on*` prop level, if its same.\n\n### Imperatively controlling animation by Anime helper methods.\n\nAnime supports various helper methods for controlling the animation instance like play/pause/reset on some event. One can grab the reference of the current animation instance by passing React ref in **`animeRef`** prop as\n\n```tsx\nimport React, { FC, useEffect, useRef } from \"react\";\nimport Anime from \"shared/components/Anime\";\nimport animejs, { AnimeInstance } from \"animejs\";\n\nconst MyComp: FC = () =\u003e {\n\n  const animeRef = useRef\u003cAnimeInstance\u003e();\n\n  useEffect(() =\u003e {\n    setTimeout(() =\u003e {\n      if (animeRef.current) {\n        animeRef.current.pause();\n        // or\n        animeRef.current.reset();\n      }\n    }, 1000);\n  }, []);\n\n  return (\n    \u003csection\u003e\n      \u003cAnime\n        in\n        appear\n        duration={2000}\n        onEntering={{ translateX: [300, 0], opacity: [0.5, 1], easing: \"linear\" }}\n        animeRef={animeRef}\n      \u003e\n        \u003cspan\u003e\u003c/span\u003e\n      \u003c/Anime\u003e\n    \u003c/section\u003e\n  )\n}\n```\n\n\n### 2. Group or List Animation\n\n- #### Staggered entering animtion\n\n  ```tsx\n  \u003cTransactions\u003e\n    \u003cAnime\n      in\n      duration={300}\n      appear\n      onEntering={{\n        translateY: [100, 0],\n        opacity: [0, 1],\n        delay: animejs.stagger(60),\n        easing: \"linear\"\n      }}\n    \u003e\n      {transactions.map(transaction =\u003e (\n        \u003cTransactionItem key={transaction.timestamp}\u003e\n          \u003cHeading\u003e\n            Exchanged from GBP to USD\n          \u003c/Heading\u003e\n          \u003cTimestamp\u003e{transaction.date} \u003c/Timestamp\u003e\n        \u003c/TransactionItem\u003e\n      ))}\n    \u003c/Anime\u003e\n  \u003c/Transactions\u003e\n  ```\n\n  Simply, the \u0026lt;Anime\u0026gt; can be supplied a set of children and an Anime `delay` property can be used to simulate the stagger effect.\n\n- #### Dynamically entering and exiting list items using TransitionGroup\n\n  ```tsx\n  \u003cTransitionGroup\u003e\n    {fruits \u0026\u0026\n      fruits.map((fruit, i) =\u003e (\n        \u003cAnime\n          appear\n          key={fruit}\n          onEntering={{\n            translateX: [-200, 0],\n            opacity: [0, 1],\n            duration: 200,\n            delay: i * 40\n          }}\n          onExiting={{\n            translateX: \"100%\",\n            opacity: 0,\n            easing: \"easeInOutQuad\",\n            duration: 300\n          }}\n          duration={300}\n        \u003e\n          \u003cListItem key={fruit}\u003e\n            \u003cspan\u003e{fruit}\u003c/span\u003e\n            \u003cDeleteButton onClick={handleItemDelete(i)}\u003e-\u003c/DeleteButton\u003e\n          \u003c/ListItem\u003e\n        \u003c/Anime\u003e\n      ))}\n  \u003c/TransitionGroup\u003e\n  ```\n\n  When there's a use case of dynamically adding or removing the elements from the array of elements in a state variable, each element has to be individually wrapped in it's own Anime or Transition element. The `in` prop of each element is provided by the virtue of `TransitionGroup` element in this case. It takes care of mounting and unmounting child elements by passing the accurate `in` prop accordingly.\n\n  Note: Alias of `TransitionGroup` is also exported from the library as `AnimeGroup` and can be used inter-changeably.\n  \n  `import Anime, { AnimeGroup } from \"@mollycule/react-anime\";`\n \n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\u003c!-- LICENSE --\u003e\n\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n\u003c!-- CONTACT --\u003e\n\n## Contact\n\nParam Singh - [@paramsinghvc](https://github.com/paramsinghvc) - paramsinghvc@gmail.com\n\nProject Link: [https://github.com/paramsinghvc/react-anime](https://github.com/paramsinghvc/react-anime)\n\n\u003c!-- ACKNOWLEDGEMENTS --\u003e\n\n## Acknowledgements\n\n- [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)\n- [Img Shields](https://shields.io)\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\n[build-shield]: https://img.shields.io/badge/build-passing-brightgreen.svg?style=for-the-badge\n[contributors-shield]: https://img.shields.io/badge/contributors-1-orange.svg?style=for-the-badge\n[license-shield]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge\n[license-url]: https://choosealicense.com/licenses/mit\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=0077B5\n[linkedin-url]: https://www.linkedin.com/in/paramsinghvc\n[product-screenshot]: https://user-images.githubusercontent.com/4329912/69421370-d7589500-0d46-11ea-8ec1-ee98ade7bbda.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparamsinghvc%2Freact-anime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparamsinghvc%2Freact-anime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparamsinghvc%2Freact-anime/lists"}