react-simple-animate
v3.5.3TypeScript
react simple animate
reactanimationtransition-animationanimate-cssanimation-controlleranimation-sequencekeyframes-animationanimate
0/weekUpdated 1 years agoMITUnpacked: 47.2 KB
Published by beier luo
npm install react-simple-animate
React Simple Animate
React UI animation made easy
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
- Getting started
- Animate
- AnimateKeyframes
- AnimateGroup
- Custom Hooks
- 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. /}
iterationCount="infinite"
keyframes={["opacity: 0", "opacity: 1"]}
>
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
)};};
``
By the makers of BEEKAI
We also make BEEKAI. Build the next-generation forms with modern technology and best in class user experience and accessibility.