{"id":15217,"library":"react-simple-animate","title":"React Simple Animate","description":"React Simple Animate is a lightweight library providing declarative animation capabilities for React applications. It enables developers to implement animations from style A to style B, CSS keyframes animations, and chain multiple animations into sequences. Currently stable at version 3.5.3, it maintains an active release cadence with frequent minor updates focusing on bug fixes, type improvements, and React version compatibility, including support for React 19. Key differentiators include its minimal footprint and lack of external dependencies beyond React itself, making it an efficient choice for adding performant UI animations without bloat. It provides both component-based (`Animate`, `AnimateKeyframes`, `AnimateGroup`) and hook-based (`useAnimate`, `useAnimateKeyframes`, `useAnimateGroup`) APIs to suit different development styles, offering flexibility for both simple transitions and complex choreographed sequences.","status":"active","version":"3.5.3","language":"javascript","source_language":"en","source_url":"https://github.com/bluebill1049/react-simple-animation","tags":["javascript","react","animation","transition-animation","animate-css","animation-controller","animation-sequence","keyframes-animation","animate","typescript"],"install":[{"cmd":"npm install react-simple-animate","lang":"bash","label":"npm"},{"cmd":"yarn add react-simple-animate","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-simple-animate","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components; specifies compatibility with multiple major React versions.","package":"react-dom","optional":false}],"imports":[{"note":"Animate is a named export component used for basic style A to B animations.","wrong":"import Animate from 'react-simple-animate'","symbol":"Animate","correct":"import { Animate } from 'react-simple-animate'"},{"note":"useAnimate is a named export hook for programmatic control over animations in functional components. Requires ESM import style.","wrong":"const useAnimate = require('react-simple-animate').useAnimate","symbol":"useAnimate","correct":"import { useAnimate } from 'react-simple-animate'"},{"note":"AnimateKeyframes is a named export component for applying CSS keyframe animations.","wrong":"import AnimateKeyframes from 'react-simple-animate'","symbol":"AnimateKeyframes","correct":"import { AnimateKeyframes } from 'react-simple-animate'"},{"note":"AnimateGroup is a named export component for orchestrating multiple sequenced animations.","symbol":"AnimateGroup","correct":"import { AnimateGroup } from 'react-simple-animate'"}],"quickstart":{"code":"import React from \"react\";\nimport { Animate, AnimateKeyframes, AnimateGroup } from \"react-simple-animate\";\n\nexport default () => (\n  <>\n    {/* animate individual element. */}\n    <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>\n      <h1>React simple animate</h1>\n    </Animate>\n    \n    {/* animate keyframes with individual element. */}\n    <AnimateKeyframes\n      play\n      iterationCount=\"infinite\"\n      keyframes={[\"opacity: 0\", \"opacity: 1\"]}\n    >\n      <h1>React simple animate with keyframes</h1>\n    </AnimateKeyframes>\n    \n    {/* animate group of animation in sequences */}\n    <AnimateGroup play>\n      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}>\n        first\n      </Animate>\n      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={1}>\n        second\n      </Animate>\n      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={2}>\n        third\n      </Animate>\n    </AnimateGroup>\n  </>\n);\n","lang":"typescript","description":"This example demonstrates the usage of `Animate`, `AnimateKeyframes`, and `AnimateGroup` components to create individual, keyframe, and sequenced UI animations in React."},"warnings":[{"fix":"Ensure all style objects passed to animation props conform to `React.CSSProperties`.","message":"The type definition for the `Style` prop was updated in v3.4.0. If you were previously using custom type definitions for animation styles, they might no longer be compatible, as the prop is now strictly typed as `React.CSSProperties`.","severity":"breaking","affected_versions":">=3.4.0"},{"fix":"Upgrade to `react-simple-animate@3.5.2` or higher to ensure `onComplete` callbacks function reliably with `useAnimate`.","message":"The `onComplete` callback within the `useAnimate` hook previously had a bug where it might not have fired correctly or consistently.","severity":"gotcha","affected_versions":"<3.5.2"},{"fix":"Upgrade to `react-simple-animate@3.3.11` or higher to ensure `useAnimateKeyframes` responds correctly to state updates.","message":"When using `useAnimateKeyframes`, there was a known issue where animations might not re-run or update correctly when component state changes.","severity":"gotcha","affected_versions":"<3.3.11"},{"fix":"Upgrade to `react-simple-animate@3.3.9` or higher for correct time delay management within `AnimateGroup`.","message":"`AnimateGroup` had a bug affecting time delays between sequenced animations, potentially causing incorrect timing or overlaps.","severity":"gotcha","affected_versions":"<3.3.9"},{"fix":"Install `react` and `react-dom` versions compatible with `^16.8.0 || ^17 || ^18 || ^19` as specified in the peer dependencies. For example, `npm install react react-dom`.","message":"Ensure your React and React-DOM versions are compatible with the library's peer dependencies. Newer versions of `react-simple-animate` explicitly support React 17, 18, and 19.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Update `react-simple-animate` to version `3.5.2` or newer.","cause":"A bug in the `useAnimate` hook prevented the `onComplete` callback from being called reliably in versions prior to 3.5.2.","error":"TypeError: Cannot read properties of undefined (reading 'onComplete') or onComplete callback not firing."},{"fix":"Update `react-simple-animate` to version `3.3.11` or newer.","cause":"The `useAnimateKeyframes` hook failed to respond correctly to component state updates in versions prior to 3.3.11.","error":"Animation not re-running or updating after state change when using `useAnimateKeyframes`."},{"fix":"Update `react-simple-animate` to version `3.3.9` or newer.","cause":"A bug in `AnimateGroup` affected the timing and delay mechanisms for sequenced animations in versions prior to 3.3.9.","error":"Animations in `AnimateGroup` are overlapping or not playing in the correct sequence/timing."}],"ecosystem":"npm"}