Make React animation easy
Follow CSS animation standard- React the only dependency
Transition from style A to B.
React style animation made easy
<Animate
play={false}
start={{ opacity: 1, filter: 'blur(0)' }}
end={{ opacity: 0, filter: 'blur(10px)' }}
>
<Component />
</Animate>
Animate CSS Keyframes
Define animation keyframes in the Component
<AnimateKeyframes
play
pause={true}
iterationCount="infinite"
direction="alternate"
duration={5}
keyframes={[
'transform: rotateX(0) rotateY(0) rotateZ(0)',
'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)',
]}
>
<Component />
</AnimateKeyframes>
Animation Sequences
Control component's animation sequences
REACT
<AnimateGroup
play={false}
>
{['R', 'E', 'A', 'C', 'T'].map((item, index) => {
return (
<Animate
key={item}
sequenceIndex={index}
end={{ opacity: 0, transform: 'translateY(-10px)' }}
start={{ opacity: 1, transform: 'translateY(0)' }}
>
<Component />
</Animate>
)
})}
</AnimateGroup>
