@wt-4/react-stateful-animations NPM

React Stateful Animations 📽️

Use this library of stateful animations in your React application. Current animations:

Upload
Download
(More coming soon)

See examples here

What is a stateful animation

Traditional animated icons either play once and stop, or loop continuously.

This package is different. Our animations have state, at the moment they can: 1. Start in an initial state 2. Animate into a loading state (instead of just loading a new icon) 3. Loop this loading state indefinitely until it is told to stop 4. Transition into a completion state (instead of just loading a new icon) 5. Return to the initial state ready to start again

This might be useful say if you want a Download icon to transition to an indefinite loading state while something is downloading, and then transition into a finished state when complete.

We are looking to add more states and use cases for our animations, let us know if you have any ideas!

How to use

import {
  Download,
  animationStart,
  animationEnd,
} from '@wt-4/react-stateful-animations';

const App = () => {
  return (
    <>
      <button onClick={() => animationStart('download')}>Start</button>
      <button onClick={() => animationEnd('download')}>End</button>
      <Download id="download" />
    </>
  );
};

Import the animation into your app, and give it an id. Also import the animationStart and animationEnd functions into your app. When triggering the start of your animation call animationStart(id) with the id that you registered your animation with.

All animations built in LottieLab

react lottie animations stateful icons