✨ Now with Scroll Animations

Tailwind
Animations

The easiest way to add stunning animations to your Tailwind CSS projects.
Zero configuration, pure performance.

install

npm install tw-animations

npm install tw-animations-plugin

pnpm add tw-animations

pnpm add tw-animations-plugin

yarn add tw-animations

yarn add tw-animations-plugin

bun add tw-animations

bun add tw-animations-plugin

usage

@import 'tailwindcss';
@import 'tw-animations';

// tailwind.config.js
module.exports = {
  plugins: [
    require('tw-animations-plugin'),
  ],
};

Animation Collection

Explore our comprehensive library of ready-to-use animations

Duration

Delay

flash

animate-flash

head-shake

animate-head-shake

heartbeat

animate-heartbeat

jelly

animate-jelly

rubber-band

animate-rubber-band

shake-x

animate-shake-x

shake-y

animate-shake-y

swing

animate-swing

tada

animate-tada

wiggle

animate-wiggle

wobble

animate-wobble

float

animate-float

Scroll-driven animations

Use timeline-view and animate-range to tie animations to scroll. Each row below shows the code and the live result — scroll to trigger them.

01 — Zoom

Scales in as the element enters the viewport.


timeline-view animate-zoom-in animate-range-cover

Zoom on scroll

02 — Range presets

Control when the animation runs: gradual, moderate, brisk, or rapid.


animate-range-gradual


animate-range-moderate


animate-range-brisk


animate-range-rapid

Gradual

Moderate

Brisk

Rapid

03 — Slide from end

Enters from the right with a custom range.


timeline-view animate-slide-in-end animate-range-[entry_5%_contain_20%]

Slide from end

04 — Slide from start

Enters from the left.


timeline-view animate-slide-in-start animate-range-[entry_5%_contain_20%]

Slide from start

05 — Blur fade

Opacity + blur for a soft reveal.


timeline-view animate-blurred-fade-in animate-range-[entry_10%_contain_30%]

Blur in

Chrome 115+, Edge 115+, Safari 17.4+

Scroll & View Timelines

Tie animations to scroll progress or element visibility. Each card: code on the left, live demo on the right.

01 — Vertical progress

Progress bar driven by vertical scroll.


timeline-scroll animate-expand-horizontally

02 — Horizontal progress

Bar tied to horizontal scroll.


timeline-scroll-inline animate-expand-horizontally

→

03 — Entry & exit

Animate on enter vs on leave.


animate-range-entry


animate-range-exit

Enter

Exit

04 — Staggered reveal

Different ranges for a cascade.


animate-range-[entry_0%_cover_35%] ... [entry_30%_cover_65%]

05 — Rotation & flip

Rotate or flip as the element crosses the viewport.


timeline-view animate-rotate-360 animate-range-cover

06 — Utilities reference

All timeline and range classes at a glance.

Scroll


timeline-scroll


timeline-scroll-inline


timeline-scroll-block


timeline-scroll-x


timeline-scroll-y

View


timeline-view


timeline-view-inline


timeline-view-block


timeline-view-x


timeline-view-y

Ranges


animate-range-cover


animate-range-contain


animate-range-entry


animate-range-exit

Presets


animate-range-gradual


animate-range-moderate


animate-range-brisk


animate-range-rapid

Tailwind Animations

Animation Collection

flash

head-shake

heartbeat

jelly

rubber-band

shake-x

shake-y

swing

tada

wiggle

wobble

float

spin

ping

pulse

bounce

blurred-fade-in

blink

dancing

impulse-rotation-left

impulse-rotation-right

jiggle

pop

rotate-360

rotate-180

rotate-90

fade-in

fade-in-down

fade-in-start

fade-in-end

fade-in-up

fade-out

fade-out-down

fade-out-start

fade-out-end

fade-out-up

slide-in-down

slide-in-start

slide-in-end

slide-in-up

slide-out-down

slide-out-start

slide-out-end

slide-out-up

zoom-in

zoom-in-down

zoom-in-start

zoom-in-end

zoom-in-up

zoom-out

zoom-out-down

zoom-out-start

zoom-out-end

zoom-out-up

expand-horizontally

expand-vertically

bounce-fade-in

pulse-fade-in

slide-up-fade