Skip to content
v1.0.1

Tailwind Animations

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

$ npm install tailwind-animations
How to use
@import 'tailwindcss';
@import 'tailwind-animations';
demo_preview.html
<div class="">
<!-- Applied animation -->
</div>

Animation Collection

Explore our comprehensive library of ready-to-use animations. Customize duration, delay, and timing to fit your needs with zero configuration.

fade-in
blurred-fade-in
zoom-in
slide-in-top
bouncing
pulsing
shake
tada
jelly
flip-horizontal
swing
wobble
rotate-360
fade-in-up
slide-in-left

Scroll Animations

Animate elements based on their position in the viewport using the timeline-view utility.

Scroll down to see the magic

To animate elements on scroll, we use the timeline-view utility. This property creates a View Timeline that allows you to synchronize the animation with the element's displacement within the viewport.

The animation is automatically linked to the element's visibility in the viewport. Use animate-range to control when the animation starts and ends relative to the element's visibility.

I reveal on scroll timeline-view animate-zoom-in animate-range-cover

The animate-range property is essential for defining when the animation starts and ends relative to the element's visibility. You can use predefined ranges like gradual, moderate, brisk, or rapid to easily control the animation's pace.

Gradual (10% - 90%) animate-range-gradual
Moderate (20% - 80%) animate-range-moderate
Brisk (30% - 70%) animate-range-brisk
Rapid (40% - 60%) animate-range-rapid

Of course, you can also use custom values for more precision. By specifying values like entry 10% or contain 25%, you can perfectly time the reveal effect to match your design's flow.

I fade in from the left timeline-view animate-slide-in-left animate-range-[entry_5%_contain_20%]

You can combine different directions and effects. Using animate-slide-in-left with a scroll timeline makes the element gracefully slide into place while adjusting its opacity, synchronized with the user's scrolling speed for a more interactive feel.

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

Blurred transitions like animate-blurred-fade-in add a layer of polish. By linking it to a scroll timeline, you create a depth-of-field effect that naturally draws attention to the content as it becomes clear and focused.

Scroll & View Timelines

Link animations to scroll progress or element visibility using powerful timeline utilities.

Vertical Scroll Progress

Use timeline-scroll to link an animation to the scroll container's progress. The animation advances as you scroll.

↓ Scroll down to see the progress bar fill

timeline-scroll animate-expand-horizontally

Horizontal Scroll Progress

Use timeline-[scroll(inline)] for horizontal scroll containers. The progress bar follows your horizontal scrolling.

πŸš€
⭐
πŸ’Ž
🎯
πŸ”₯
✨
🎨
πŸ’‘
timeline-[scroll(inline)] animate-expand-horizontally

Entry & Exit Animation Ranges

Control when animations play with animate-range-entry (entering viewport) and animate-range-exit (leaving viewport).

↓ Scroll to see entry/exit animations

Entry Animation
Plays when entering
Exit Animation
Plays when leaving
animate-range-entry animate-range-exit

Staggered Reveal Effect

Combine timeline-view with different animate-range values to create a staggered reveal effect.

↓ Scroll to reveal cards in sequence

First
Second
Third
Fourth
animate-range-[entry_0%_cover_30%] β†’ [entry_10%_cover_40%] β†’ ...

Rotation on Scroll

Use animate-rotate-360 with animate-range-cover to rotate elements as they pass through the viewport.

↓ Scroll to spin the shapes

🎲
animate-rotate-360 animate-spin-clockwise animate-flip-x

Timeline Utilities Reference

Available timeline utilities and how to use them:

Scroll Timelines timeline-scroll timeline-[scroll(x)] timeline-[scroll(y)] timeline-[scroll(block)] timeline-[scroll(inline)]
View Timelines timeline-view timeline-[view(x)] timeline-[view(y)] timeline-[view(block)] timeline-[view(inline)]
Animation Ranges animate-range-cover animate-range-contain animate-range-entry animate-range-exit
Preset Ranges animate-range-gradual (10%-90%) animate-range-moderate (20%-80%) animate-range-brisk (30%-70%) animate-range-rapid (40%-60%)

Arbitrary Values

Use brackets for custom values. Use underscores _ instead of spaces.

Scroll with axis timeline-[scroll(x_root)] timeline-[scroll(y_nearest)]
View with inset timeline-[view(block)] timeline-[view(x_200px_auto)]
Custom animation ranges animate-range-[entry_0%_cover_50%] animate-range-[cover_25%_cover_75%] animate-range-[exit_-10%_exit_100%]