---
title: "Scroll Stacks — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Navigation. What is Scroll Stacks?"
canonical: "https://framer.elliotli.dev/component/scroll-stacks"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Scroll Stacks

# Scroll Stacks

Scroll-driven cinematic feature reveal

[View on Framer](https://framer.com/marketplace/components/scroll-stacks/?via=elliot-li)

![Scroll Stacks preview image 1](https://framer.elliotli.dev/og/component/scroll-stacks/7d8bac791e30070c/1600x1200.jpg)

## Summary

What is Scroll Stacks?

## Description

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #9888

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-05-12
- **Updated**: 2026-06-13
- **Added**: 2026-05-12
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation