v2.0 \u2014 React animation libraryIssue №02 · MMXXVI

Animations that flow.

The animation power of anime.js, wrapped in beautiful React components. Zero boilerplate. Production-ready.

See the demos →npm install @shakibdshy/react-animejs● MIT licensed

Specimen / live

fadeInhook: 600ms
staggerprop: 60ms
onScrollhook: 800ms

Scroll to readA field guide to React motion↓

<FadeIn>
<Stagger>
<Timeline>
<Reveal>
<Parallax>
<AnimeDraw>
<AnimeLayout>
useAnime
useAnimeTimeline
useAnimeOnScroll
useSplitText
stagger()
spring()
onScroll
<FadeIn>
<Stagger>
<Timeline>
<Reveal>
<Parallax>
<AnimeDraw>
<AnimeLayout>
useAnime
useAnimeTimeline
useAnimeOnScroll
useSplitText
stagger()
spring()
onScroll

Chapter I — Capabilities

Why developers
reach for it.

Six reasons it replaces a hand-rolled animation layer — each one a chapter of its own.

01
Zero boilerplate
One import, one component. No useEffect, no cleanup refs, no imperative anime.js calls cluttering your render.
02
TypeScript native
Full type inference on every prop. Autocomplete your animations — duration, easing, delay, stagger, all typed.
03
Tree-shakeable
Import only what you use. <FadeIn> weighs ~1.2 kB gzipped. Your bundle stays lean by default.
04
Scroll, handled
useAnimeOnScroll wraps ScrollTrigger. Reveal, parallax, and progress — server-side safe with a fallback.
05
Stagger & sequences
Compose stagger with any easing curve. Orchestrate multi-step timelines with precise keyframe timing.
06
Layout animations
useAnimeLayout runs FLIP automatically. Animate between list, grid, and detail views without measuring.

Chapter II — The Lab

Try the primitives.

Real, running animations. Tweak duration, easing, and stagger — the controls are the docs.

04 specimens

№01

<FadeIn>

Enter animation with configurable duration & easing

000%/100

№02

<Stagger>

Sequenced children with stagger timing

№03

<Magnetic>

Cursor-driven attraction — hover the field

№04

<Reveal>

Scroll-triggered reveal — enters from below

01Enter from below

02Fade and slide

03Staggered sequence

Browse the full gallery →25+ components

Chapter III — The Syntax

Same power,
React syntax.

Every anime.js API has a React-native counterpart. Pick a topic and compare the two, side by side.

animejs — vanilla imperative

import { animate } from 'animejs'
import { useEffect, useRef } from 'react'

function FadeIn({ children }) {
  const ref = useRef(null)

  useEffect(() => {
    const anim = animate(ref.current, {
      opacity: [0, 1],
      translateY: [20, 0],
      duration: 600,
      ease: 'outCubic',
    })
    return () => anim.pause()
  }, [])

  return <div ref={ref}>{children}</div>
}

react-animejs — hook

import { useAnime } from '@shakibdshy/react-animejs'

function FadeIn({ children }) {
  const { ref } = useAnime({
    opacity: [0, 1],
    translateY: [20, 0],
    duration: 600,
    ease: 'outCubic',
  })

  return <div ref={ref}>{children}</div>
}

1.2kB

gzipped, <FadeIn> only

25+components

hooks & declarative tags

46easings

named curves, plus springs

0configs

sensible typed defaults

Chapter IV — Begin

One command.
Zero config.

Install, import a component, and ship motion. Sensible typed defaults mean there is nothing to configure before the first animation runs.

bash — install

⟦~/app▸npm install @shakibdshy/react-animejs animejs

✓ added 1 package — you are ready to animate.

Read the docs →Star on GitHub ★

Animations that flow.

✦Zero boilerplate

↗TypeScript native

◎Tree-shakeable

◈Scroll, handled

◉Stagger & sequences

▤Layout animations

One command. Zero config.

Zero boilerplate

TypeScript native

Tree-shakeable

Scroll, handled

Stagger & sequences

Layout animations

One command.
Zero config.