Utility Classes
A beautifully structured guide to all utility classes provided by the Tailwind Scroll Effects engine. Use these to build stunning, presentation-ready interfaces.
Entrance Reveals
scroll-reveal
Base
Basic fade in effect. Element appears smoothly as it enters the viewport.
scroll-fade-up/down
Fades in while translating vertically by 50px.
scroll-slide-left/right
Fades in while translating horizontally by 50px.
scroll-scale
Fades in and scales up from 0.8 to 1.0.
scroll-flip
3D perspective flip reveal (rotateX 90deg to 0).
scroll-blur
Cinematic unblur effect as the element enters.
Modifiers & Stagger
scroll-stagger
Parent
Apply this to a parent container. It automatically adds a cascading delay (100ms) to all direct children that have reveal classes.
scroll-duration-{ms}
Override the default animation duration. Example: scroll-duration-700.
CSS Parallax Engine
scroll-parallax-y-{val}
Moves Y axis based on scroll timeline. Values: 24, 32, [-6rem], [-100px]
scroll-parallax-x-{val}
Moves X axis based on scroll timeline. Values: 24, [-6rem]
scroll-parallax-scale-{val}
Scales element continuously on scroll.
scroll-parallax-rotate-{val}
Rotates element continuously on scroll.
Advanced Text Engine
text-split-words
Automatically wraps every word in a span and staggers their reveal sequentially.
text-split-chars
Wraps every character individually for high-fidelity staggering.
text-stagger-{ms}
Overrides the delay between words/chars. (Options: 10, 20, 50, [10-100])
scroll-text-reveal
A color-wipe effect (from 20% opacity white to 100% white) mapped precisely to scroll progress.
Images & Indicators
image-reveal-{dir}
Creates a solid block curtain reveal over the element. Dir: left, right, top, bottom
scroll-progress-bar
Automatically creates a reading-progress bar at the top of the viewport.
Interactive & Snap
snap-active:{utility}
Variant
New in V1
A custom Tailwind variant. Triggers the utility ONLY when the element's parent slide snaps into active view.
scroll-parallax-track-container
Parent wrapper (usually tall, e.g. h-[250vh]) that acts as the scroll timeline for pinned tracks.
scroll-parallax-track-x / y
The inner track that translates horizontally (x) or vertically (y) based on the parent container's scroll position.
scroll-snap-indicator
Apply to a scroll container. Automatically injects a slick, sticky vertical dot navigation to track active slides.