Scroll Stacks is a scroll-driven vertical stack component that reveals features cinematically as the user scrolls. A sticky viewport locks in place while full-width hero images transition with a wipe or crossfade effect, numbered pill tabs track progress, and a two-column info zone displays titles, descriptions, and animated SVG stat rings. Ideal for product pages, feature breakdowns, case studies, and portfolio showcases.
Full-width hero image area with clip-mask wipe or crossfade transitions between steps
Animated SVG stat ring with real-time number counter that fires on each step activation
Horizontal numbered pill tab bar with progress line and subtle glow animation
7 curated theme presets plus a fully custom color mode with granular control over every element
Responsive layout with automatic mobile breakpoint adjustments
Label
Title
Description
Stat Value
Stat Label
Ring Fill (%)
Image (Responsive Image)
Dark, Light, Indigo, Emerald, Rose, Amber, Sky, Custom
Custom Colors: Text, Text Muted, Accent, Line, Tab Active Text, Counter Text, Counter Background
Scroll per Step (px)
Image Height (%)
Border Radius
Overlay Opacity
Transition (Wipe / Crossfade)
Title Font
Description Font
Label Font
Stat Font
Stat Label Font
Tab Font
Tab Bar
Stat Ring
Counter Badge
Image Overlay
Labels
Descriptions
SaaS product pages that need to present 3–10 features in a compact, scroll-driven format
Agency and portfolio sites showcasing process steps or project phases
Landing pages where stat-driven storytelling converts visitors into leads
Feature comparison sections that benefit from cinematic image transitions and data visualisation
One component. Full scroll storytelling. Drop it in and let the scroll do the selling.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
