Scroll Reveal
Scroll down to see elements animate into view. Each section uses a different reveal effect powered by IntersectionObserver.
Scroll down
Fade Up
Elements rise gently from below as they enter the viewport.
This is the most common scroll reveal pattern. Content slides upward while fading in, creating a natural sense of vertical flow. The timing is calibrated so each element feels deliberate but not slow.
Observer API
Uses the native IntersectionObserver to detect when elements enter the viewport efficiently.
Threshold Control
Elements trigger when a configurable percentage becomes visible, defaulting to 15%.
CSS Transitions
All animations use CSS transitions for smooth, GPU-accelerated rendering.
Fade Left
Content slides in from the left edge, useful for sequential storytelling.
Fade Right
The mirror of fade-left. Works well for alternating layout patterns.
Scale In
Elements grow from a smaller size, drawing focus to the center of each item.
Blur In
A soft blur dissolves away to reveal sharp content. Elegant for hero-style sections.
Good animation is invisible. You don't notice the transition -- you just feel the content arriving naturally, as if it was always meant to be there.
-- Design principle
Staggered List
List items animate one after another with incremental delays.
First item fades in immediately on scroll
Second item follows after a short delay
Third item continues the cascade pattern
Fourth item builds the rhythm further
Fifth item completes the stagger sequence
Feature Grid
Combining card layouts with staggered scale-in reveals.
Performance
Animations only trigger when elements enter the viewport, keeping the page responsive.
Accessibility
Respects prefers-reduced-motion for users who disable animations in their OS settings.
No Dependencies
Pure CSS transitions and vanilla JavaScript. No libraries or frameworks required.
Customizable
Easily adjust timing, easing, threshold, and effect type per element.
Mixed Effects
Different effects combined within a single section for visual variety.
Combine Freely
Mix different reveal types within the same section to create layered, dynamic compositions.
Stay Subtle
The best scroll animations enhance content without distracting from it. Keep durations short.
Test Widely
Always test on mobile devices and slower connections to ensure smooth performance.