React Simple Animate

Features

Install

$ npm install react-simple-animate

Docs

Quickstart

Components

importReactfrom"react";import{Animate,AnimateKeyframes,AnimateGroup}from"react-simple-animate";exportdefault()=>(<>{/* animate individual element. */}<Animateplaystart={{opacity:0}}end={{opacity:1}}><h1>React simple animate</h1></Animate>{/* animate keyframes with individual element. */}<AnimateKeyframesplayiterationCount="infinite"keyframes={["opacity: 0","opacity: 1"]}><h1>React simple animate with keyframes</h1></AnimateKeyframes>{/* animate group of animation in sequences */}<AnimateGroupplay><Animatestart={{opacity:0}}end={{opacity:1}}sequenceIndex={0}>        first</Animate><Animatestart={{opacity:0}}end={{opacity:1}}sequenceIndex={1}>        second</Animate><Animatestart={{opacity:0}}end={{opacity:1}}sequenceIndex={2}>        third</Animate></AnimateGroup></>);

Hooks

importreactfrom'react';import{useAnimate,useAnimateKeyframes,useAnimateGroup}from'react-simple-animate';exportconstuseAnimateExample=()=>{const{ style, play}=useAnimate({start:{opacity:0},end:{opacity:1}});useEffect(()=>play(true),[]);return<divstyle={style}>useAnimate</div>;};exportconstuseAnimateKeyframesExample=()=>{const{ style, play}=useAnimateKeyframes({keyframes:['opacity: 0','opacity: 1'],iterationCount:4});useEffect(()=>play(true),[]);return<divstyle={style}>useAnimate</div>;};exportconstuseAnimateGroup=()=>{const{ styles=[], play}=useAnimateGroup({sequences:[{start:{opacity:1},end:{opacity:0}},{start:{background:"red"},end:{background:"blue"}}]});useEffect(()=>play(true),[]);return{styles.map(style=><divstyle={style}>useAnimateGroup</div>)};};

By the makers of BEEKAI