React Simple Animate
React UI animation made easy
[](https://www.npmjs.com/package/react-simple-animate)
[](https://www.npmjs.com/package/react-simple-animate)
[](https://bundlephobia.com/result?p=react-simple-animate)
[](https://coveralls.io/github/bluebill1049/react-simple-animate?branch=master)
## Features
- Animation from style A to B
- CSS keyframes animation
- Chain up animation sequences
- Tiny size without other dependency
## Install
$ npm install react-simple-animate
## [Docs](https://react-simple-animate.now.sh/)
- [Getting started](https://react-simple-animate.now.sh/basics)
- [Animate](https://react-simple-animate.now.sh/animate)
- [AnimateKeyframes](https://react-simple-animate.now.sh/animate-keyframes)
- [AnimateGroup](https://react-simple-animate.now.sh/animate-group)
- [Custom Hooks](https://react-simple-animate.now.sh/hooks)
- [Advanced](https://react-simple-animate.now.sh/advanced)
## Quickstart
#### Components
```jsx
import React from "react";
import { Animate, AnimateKeyframes, AnimateGroup } from "react-simple-animate";
export default () => (
<>
{/* animate individual element. */}
React simple animate
{/* animate keyframes with individual element. */}
React simple animate with keyframes
{/* animate group of animation in sequences */}
first
second
third
);
```
#### Hooks
```jsx
import react from 'react';
import { useAnimate, useAnimateKeyframes, useAnimateGroup } from 'react-simple-animate';
export const useAnimateExample = () => {
const { style, play } = useAnimate({ start: { opacity: 0 }, end: { opacity: 1 } });
useEffect(() => play(true), []);
return useAnimate
;
};
export const useAnimateKeyframesExample = () => {
const { style, play } = useAnimateKeyframes({
keyframes: ['opacity: 0', 'opacity: 1'],
iterationCount: 4
});
useEffect(() => play(true), []);
return useAnimate
;
};
export const useAnimateGroup = () => {
const { styles = [], play } = useAnimateGroup({
sequences: [
{ start: { opacity: 1 }, end: { opacity: 0 } },
{ start: { background: "red" }, end: { background: "blue" } }
]
});
useEffect(() => play(true), []);
return {styles.map(style => useAnimateGroup
)};
};
```
## Sponsors
Thank you very much for those kind people with their sponsorship to this project.
## Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
