React AnimeJS

Explore

Component gallery

Discover the API, try a live preview, and open a Playground only when the interaction needs more room.

Press ⌘K to jump to any component

25 demos
ui

Accordion

Expand/collapse panels with height animation and single/multi open modes

#ui#collapse#height
Open detailsintermediate
ui

Accordion (Presence)

Mount/unmount accordion panels with enter/exit cross-fade via AnimePresence

#ui#collapse#presence
Open detailsbeginner
ui

Animated Slider

Slide, fade, scale, flip transitions with visual slide showcase

#ui#slider#transitions
Open detailsintermediate
core

Basic Animation

Animate targets with CSS selectors, stagger, easing, and callbacks

#stagger#easing#selectors
Open detailsbeginner
svg

ClipPath Reveal

Circle, diamond, star, and wipe clipPath reveal animations

#svg#clippath#reveal
Open detailsintermediate
0
ui

Counter & Countdown

Animated counter and countdown with padding and format options

#ui#counter#countdown
Open detailsbeginner
interaction

Draggable

Physics-based drag with snap, spring release, and programmatic controls

#drag#physics#snap
Open detailsintermediate
Item one
Item two
Item three
ui

Dropdown Menu

Button-triggered menu with staggered item entrance and click-outside dismiss

#ui#menu#stagger
Open detailsintermediate
core

Layout

FLIP-based layout animations with enter/exit, stagger, and methods

#layout#flip#enter-exit
Open detailsadvanced
scroll

On Scroll

Scroll-linked animation with enter/leave callbacks and progress tracking

#scroll#callbacks#progress
Open detailsintermediate
ui

Reorder List

FLIP-based shuffle, move, add/remove, and grid reorder animations

#ui#flip#reorder+1
Open detailsadvanced
core

Scope

Animation scopes with media queries, methods, and keepTime

#scope#media-query#cleanup
Open detailsadvanced
React
ui

Scramble Text

Text scramble animation with autoplay, loop, and custom chars

#ui#text#scramble
Open detailsintermediate
scroll

Scroll-Linked Animations

Parallax depth, reveal columns, conveyor, morph tile, and wave bar

#scroll#parallax#reveal
Open detailsadvanced
F
B
R
L
T
B
ui

Spinning Cube

3D cube rotation with speed variants and interactive controls

#ui#3d#rotate
Open detailsbeginner
React
core

Split Text

Text splitting into chars, words, lines with CJK and effects

#text#chars#words+1
Open detailsintermediate
svg

SVG Draw

Animate SVG path drawing with stroke-dashoffset

#svg#stroke#draw
Open detailsintermediate
svg

SVG Morph

Morph between different SVG path shapes smoothly

#svg#morph#path
Open detailsintermediate
svg

SVG Motion Path

Move elements along an SVG motion path

#svg#motion-path#path
Open detailsintermediate
ABC
ui

Tabs

Animated underline indicator with cross-fading content panels

#ui#indicator#crossfade
Open detailsbeginner
core

Timeline

Sequenced timeline animations with sync, labels, and methods

#timeline#sequence#sync
Open detailsintermediate
0
core

Timer

Standalone timer with playback controls, callbacks, and methods

#timer#loop#callbacks
Open detailsbeginner
Saved
Copied
ui

Toast

Stacked notifications with enter/exit animations and auto-dismiss

#ui#notification#presence
Open detailsintermediate
ui

Toggle Switch

Animated toggle switch with styled and disabled states

#ui#toggle#states
Open detailsbeginner
Hover me
Tooltip
ui

Tooltip

Hover or focus trigger with spring enter/exit and smart placement

#ui#hover#reveal
Open detailsbeginner

Ready to build?

Every component runs on React AnimeJS — install once, animate everywhere.

npm install @shakibdshy/react-animejs