Coding / Programming Videos

Post your favorite coding videos and share them with others!

React Simple Animate – UI Animation made simple

Source link

  • 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>

Source link

Bookmark(0)
 

Leave a Reply

Please Login to comment
  Subscribe  
Notify of
Translate »