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
Quickstart
Components
import React from "react";
import { Animate, AnimateKeyframes, AnimateGroup } from "react-simple-animate";
export default () => (
<>
{/* animate individual element. */}
<Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
<h1>React simple animate</h1>
</Animate>
{/* animate keyframes with individual element. */}
<AnimateKeyframes
play
iterationCount="infinite"
keyframes={["opacity: 0", "opacity: 1"]}
>
<h1>React simple animate with keyframes</h1>
</AnimateKeyframes>
{/* animate group of animation in sequences */}
<AnimateGroup play>
<Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}>
first
</Animate>
<Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={1}>
second
</Animate>
<Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={2}>
third
</Animate>
</AnimateGroup>
</>
);
Hooks
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 <div style={style}>useAnimate</div>;
};
export const useAnimateKeyframesExample = () => {
const { style, play } = useAnimateKeyframes({
keyframes: ['opacity: 0', 'opacity: 1'],
iterationCount: 4
});
useEffect(() => play(true), []);
return <div style={style}>useAnimate</div>;
};
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 => <div style={style}>useAnimateGroup</div>)};
};
Contributors
Code Contributors
This project exists thanks to all the people who contribute. [Contribute].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]