Make web animation simple with react
React Simple Animate,UI Animation Made Simple.
React Simple Animate
- 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
import react from 'react';
import { Animate, AnimateKeyframes, AnimateGroup } from 'react-simple-animate';
const props = {
startStyle: { opacity: 0 }
endStyle: { opacity: 1 }
};
export default () => {
return (
// This example demonstrate animate individual element.
<Animate play {...props}>
<h1>React simple animate</h1>
</Animate>
// This example demonstrate animate keyframes with individual element.
<AnimateKeyframes play iterationCount="infinite" keyframes={['opacity: 0', 'opacity: 1']}>
<h1>React simple animate with keyframes</h1>
</AnimateKeyframes>
// This example demonstrate animate group of animation with sequenceIndex.
<AnimateGroup play>
<Animate {...props} sequenceIndex={0} />
<p>Next animation below: </p>
<Animate {...props} sequenceIndex={1} />
<p>Final animation below: </p>
<Animate {...props} sequenceIndex={2} />
</AnimateGroup>
);
};
Contributors
Thanks goes to these wonderful people:
Github Repository
Tags: #React #Animation