logo

React Simple Animate

UI Animation Made Simple

npm install --S react-simple-animate
  • Make React animation easyMake React animation easy
  • Follow CSS animation standardFollow CSS animation standard
  • React the only dependency

Transition from inline style A to B.

Inline style React animation made easy

<Animate
  play={false}
  startStyle={{ opacity: 1, filter: 'blur(0)' }}
  endStyle={{ opacity: 0, filter: 'blur(10px)' }}
>
  <Component />
</Animate>

Animate CSS Keyframes

Defined your animation keyframes in your Component

<AnimateKeyframes
  play
  iterationCount="infinite"
  direction="alternate"
  durationSeconds={10}
  playState="running"
  keyframes={[
    'transform: rotateX(0) rotateY(0) rotateZ(0)',
    'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)',
  ]}
>
  <Component />
</AnimateKeyframes>

Animation Sequences

Control Animate components sequences

REACT
<AnimateGroup
  play={false}
>
  {['R', 'E', 'A', 'C', 'T'].map((item, index) => {
    return (
      <Animate
        key={item}
        sequenceIndex={index}
        endStyle={{ opacity: 0, transform: 'translateY(-10px)' }}
        startStyle={{ opacity: 1, transform: 'translateY(0)' }}
      >
        <Component />
      </Animate>
    )
  })}
</AnimateGroup>