Tailwind Animations
The easiest way to add stunning animations to your Tailwind CSS projects. Zero configuration, pure performance.
@import 'tailwindcss';
@import 'tailwind-animations'; Animation Collection
Explore our comprehensive library of ready-to-use animations. Customize duration, delay, and timing to fit your needs with zero configuration.
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.
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.
animate-range-gradual
animate-range-moderate
animate-range-brisk
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.
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.
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
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
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:
timeline-scroll timeline-[scroll(x)] timeline-[scroll(y)] timeline-[scroll(block)] timeline-[scroll(inline)] timeline-view timeline-[view(x)] timeline-[view(y)] timeline-[view(block)] timeline-[view(inline)] animate-range-cover animate-range-contain animate-range-entry animate-range-exit 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.
timeline-[scroll(x_root)] timeline-[scroll(y_nearest)] timeline-[view(block)] timeline-[view(x_200px_auto)] animate-range-[entry_0%_cover_50%] animate-range-[cover_25%_cover_75%] animate-range-[exit_-10%_exit_100%]