Registry / web-framework / react-simple-animate

react-simple-animate

library3.5.3jsnpmunverified

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.

web-framework

npm install react-simple-animate

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-SIMPLE-ANIMA

react-simple-animate

web-frameworkjavascriptv3.5.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Animate

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

✗ import Animate from 'react-simple-animate'

Animate is a named export component used for basic style A to B animations.

useAnimate

✓ import { useAnimate } from 'react-simple-animate'

✗ const useAnimate = require('react-simple-animate').useAnimate

useAnimate is a named export hook for programmatic control over animations in functional components. Requires ESM import style.

AnimateKeyframes

✓ import { AnimateKeyframes } from 'react-simple-animate'

✗ import AnimateKeyframes from 'react-simple-animate'

AnimateKeyframes is a named export component for applying CSS keyframe animations.

AnimateGroup

✓ import { AnimateGroup } from 'react-simple-animate'

AnimateGroup is a named export component for orchestrating multiple sequenced animations.

This example demonstrates the usage of `Animate`, `AnimateKeyframes`, and `AnimateGroup` components to create individual, keyframe, and sequenced UI animations in React.

import React from "react"; import { Animate, AnimateKeyframes, AnimateGroup } from "react-simple-animate"; export default () => ( <> {/* animate individual element. */} <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}> <h1>React simple animate</h1> </Animate> {/* animate keyframes with individual element. */} <AnimateKeyframes play iterationCount="infinite" keyframes={["opacity: 0", "opacity: 1"]} > <h1>React simple animate with keyframes</h1> </AnimateKeyframes> {/* animate group of animation in sequences */} <AnimateGroup play> <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}> first </Animate> <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={1}> second </Animate> <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={2}> third </Animate> </AnimateGroup> </> );

Debug

Known issues

breakingThe 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`.

fix

Ensure all style objects passed to animation props conform to `React.CSSProperties`.

affects: >=3.4.0

gotchaThe `onComplete` callback within the `useAnimate` hook previously had a bug where it might not have fired correctly or consistently.

fix

Upgrade to `react-simple-animate@3.5.2` or higher to ensure `onComplete` callbacks function reliably with `useAnimate`.

affects: <3.5.2

gotchaWhen using `useAnimateKeyframes`, there was a known issue where animations might not re-run or update correctly when component state changes.

fix

Upgrade to `react-simple-animate@3.3.11` or higher to ensure `useAnimateKeyframes` responds correctly to state updates.

affects: <3.3.11

gotcha`AnimateGroup` had a bug affecting time delays between sequenced animations, potentially causing incorrect timing or overlaps.

fix

Upgrade to `react-simple-animate@3.3.9` or higher for correct time delay management within `AnimateGroup`.

affects: <3.3.9

gotchaEnsure 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.

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`.

affects: *

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'onComplete') or onComplete callback not firing.

A bug in the `useAnimate` hook prevented the `onComplete` callback from being called reliably in versions prior to 3.5.2.

fix

Update `react-simple-animate` to version `3.5.2` or newer.

Animation not re-running or updating after state change when using `useAnimateKeyframes`.

The `useAnimateKeyframes` hook failed to respond correctly to component state updates in versions prior to 3.3.11.

fix

Update `react-simple-animate` to version `3.3.11` or newer.

Animations in `AnimateGroup` are overlapping or not playing in the correct sequence/timing.

A bug in `AnimateGroup` affected the timing and delay mechanisms for sequenced animations in versions prior to 3.3.9.

fix

Update `react-simple-animate` to version `3.3.9` or newer.

Upgrade

Version history

3.5.3latest on npm

Audit

Dependencies

react-domrequiredPeer dependency required for rendering React components; specifies compatibility with multiple major React versions.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/bluebill1049/react-simple-animation ↗

packagehttps://www.npmjs.com/package/react-simple-animate ↗

homepagehttps://react-simple-animate.ai/ ↗