About Scroll Stacks
What is Scroll Stacks?
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.
Core Features
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
Controls inside Framer
Steps
Label
Title
Description
Stat Value
Stat Label
Ring Fill (%)
Image (Responsive Image)
Theme
Dark, Light, Indigo, Emerald, Rose, Amber, Sky, Custom
Custom Colors: Text, Text Muted, Accent, Line, Tab Active Text, Counter Text, Counter Background
Layout
Scroll per Step (px)
Image Height (%)
Image Style
Border Radius
Overlay Opacity
Transition (Wipe / Crossfade)
Typography
Title Font
Description Font
Label Font
Stat Font
Stat Label Font
Tab Font
Visibility
Tab Bar
Stat Ring
Counter Badge
Image Overlay
Labels
Descriptions
Best use cases
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.
Questions or custom requests?
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
