react simple animate
npm install react-simple-animateReact UI animation made easy
- Animation from style A to B
- CSS keyframes animation
- Chain up animation sequences
- Tiny size without other dependency
$ npm install react-simple-animate
- Getting started
- Animate
- AnimateKeyframes
- AnimateGroup
- Custom Hooks
- Advanced
#### 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"]}
>
`
#### 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
export const useAnimateKeyframesExample = () => {
const { style, play } = useAnimateKeyframes({
keyframes: ['opacity: 0', 'opacity: 1'],
iterationCount: 4
});
useEffect(() => play(true), []);
return
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 =>
We also make BEEKAI. Build the next-generation forms with modern technology and best in class user experience and accessibility.