Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paramsinghvc/react-anime
React wrapper component <Anime /> for animejs
https://github.com/paramsinghvc/react-anime
animation animejs javascript npm react typescript web webpack
Last synced: 2 months ago
JSON representation
React wrapper component <Anime /> for animejs
- Host: GitHub
- URL: https://github.com/paramsinghvc/react-anime
- Owner: paramsinghvc
- License: mit
- Created: 2019-11-22T11:01:07.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T12:02:08.000Z (about 2 years ago)
- Last Synced: 2024-10-28T22:15:00.557Z (3 months ago)
- Topics: animation, animejs, javascript, npm, react, typescript, web, webpack
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@mollycule/react-anime
- Size: 1.04 MB
- Stars: 19
- Watchers: 2
- Forks: 3
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Build Status][build-shield]]()
[![MIT License][license-shield]][license-url]
[![Contributors][contributors-shield]]()
[![LinkedIn][linkedin-shield]][linkedin-url]
React wrapper component <Anime /> for animejs
Usher life to your React Apps easily
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
.
NPM Link
## Table of Contents
- [About the Project](#about-the-project)
- [Built With](#built-with)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
- [Acknowledgements](#acknowledgements)
## About The Project
[![Product Name Screen Shot][product-screenshot]](https://example.com)
[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.
React Anime library is a way of incorporating these benefits of animejs in a react environment easily by simply using <Anime /> element passing in the transformation configs as props to various React Transition hooks.
React 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.
### Built With
- [TypeScript](https://www.typescriptlang.org/)
- [Webpack](https://webpack.js.org/)
- [React Transition Group](http://reactcommunity.org/react-transition-group/transition)
- [AnimeJS](https://animejs.com)
## Getting Started
### Prerequisites
Following Peer Dependencies are required for using redux-hooks package:
- react: ^16.8.0,
- react-transition-group: ^4.3.0,
- animejs: ^3.1.0
### Installation
```sh
# Install the Peer Dependencies
npm i react react-transition-group animejs -S
# Install the typings if using a TS environment
npm i @types/react-transition-group @types/animejs -S
npm i @mollycule/react-anime -S
```
or
```sh
yarn add react react-transition-group animejs
yarn add @types/react-transition-group @types/animejs
yarn add @mollycule/react-anime -S
```
## Usage
### 1. Single Element Animation
```tsx
import Anime from "@mollycule/react-anime";
class App extends Component {
render() {
return (
Hola Mundo
);
}
}
export default App;
```
Below is the explanation of all the props being passed.
1. **`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.
2. **`mountOnEnter`**: By default component will be mounted only when animation starts or when `in` becomes true. It can controlled through this prop.
3. **`unmountOnExit`**: By default component will be unmounted when animation exits or when `in` becomes false. It can controlled through this prop.
4. **`appear`**: Normally the child inside <Anime> doesn't animate when it's mounted along with <Anime> as `in` set as true. Setting **`appear`** to true is important to view the child element transition or animate while mounting along with <Anime>. Read more [here](http://reactcommunity.org/react-transition-group/transition)
5. **`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.
6. 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 <Amime duration={2000} > level than at each `on*` prop level, if its same.
### Imperatively controlling animation by Anime helper methods.
Anime 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
```tsx
import React, { FC, useEffect, useRef } from "react";
import Anime from "shared/components/Anime";
import animejs, { AnimeInstance } from "animejs";
const MyComp: FC = () => {
const animeRef = useRef();
useEffect(() => {
setTimeout(() => {
if (animeRef.current) {
animeRef.current.pause();
// or
animeRef.current.reset();
}
}, 1000);
}, []);
return (
)
}
```
### 2. Group or List Animation
- #### Staggered entering animtion
```tsx
{transactions.map(transaction => (
Exchanged from GBP to USD
{transaction.date}
))}
```
Simply, the <Anime> can be supplied a set of children and an Anime `delay` property can be used to simulate the stagger effect.
- #### Dynamically entering and exiting list items using TransitionGroup
```tsx
{fruits &&
fruits.map((fruit, i) => (
{fruit}
-
))}
```
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.
Note: Alias of `TransitionGroup` is also exported from the library as `AnimeGroup` and can be used inter-changeably.
`import Anime, { AnimeGroup } from "@mollycule/react-anime";`
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Param Singh - [@paramsinghvc](https://github.com/paramsinghvc) - [email protected]
Project Link: [https://github.com/paramsinghvc/react-anime](https://github.com/paramsinghvc/react-anime)
## Acknowledgements
- [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)
- [Img Shields](https://shields.io)
[build-shield]: https://img.shields.io/badge/build-passing-brightgreen.svg?style=for-the-badge
[contributors-shield]: https://img.shields.io/badge/contributors-1-orange.svg?style=for-the-badge
[license-shield]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
[license-url]: https://choosealicense.com/licenses/mit
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=0077B5
[linkedin-url]: https://www.linkedin.com/in/paramsinghvc
[product-screenshot]: https://user-images.githubusercontent.com/4329912/69421370-d7589500-0d46-11ea-8ec1-ee98ade7bbda.png