react-simple-animate

Docs | Animate | Keyframes | Groups | Hooks

Features

• Animate React components with CSS transitions or keyframes
• Sequence animations with AnimateGroup
• Use hooks for custom animation control
• Small package with no runtime dependencies

Install

npm install react-simple-animate

Quickstart

import { Animate } from 'react-simple-animate';

function App() {
  return (
    <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
      <h1>Hello, animation!</h1>
    </Animate>
  );
}

Animate, useAnimate, and transition entries in useAnimateGroup accept a transitionProperty option. It defaults to all; set it to a CSS property or comma-separated properties to limit what transitions, for example:

<Animate
  play
  start={{ opacity: 0 }}
  end={{ opacity: 1, transform: 'translateY(0)' }}
  transitionProperty="opacity, transform"
>
  <h1>Hello, animation!</h1>
</Animate>