---
title: "Concept Stepper — Framer component · Best of Framer"
description: "$8.00 · Framer component · by itserastus · Sections. Concept Stepper pins a diagram on desktop and advances numbered steps as the page moves - then switches to swipe navigation on mobile."
canonical: "https://framer.elliotli.dev/component/concept-stepper"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Concept Stepper

# Concept Stepper

Scroll-driven sticky diagram steps

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

![Concept Stepper preview image 1](https://framer.elliotli.dev/og/component/concept-stepper/1c547565772f2668/1600x1200.jpg)

## Summary

Concept Stepper pins a diagram on desktop and advances numbered steps as the page moves - then switches to swipe navigation on mobile.

## Description

Tell a process or form-finding story as users scroll. Concept Stepper pins a diagram on desktop and advances numbered steps as the page moves - then switches to swipe navigation on mobile.

Ideal for architecture case studies, product process sections, research narratives, and any sequence that needs a diagram + caption locked in view while copy progresses.

What's included

-   Sticky scroll mode (desktop): diagram stays pinned while steps change
    
-   Mobile mode: vertical layout + left/right swipe on the diagram
    
-   Configurable steps: number, title, description, image (up to 8)
    
-   Section label + body copy with full typography controls
    
-   Transition presets: crossfade, slide, zoom
    
-   Click or hover activation when sticky scroll is off
    
-   Scroll distance per step, sticky offset, mobile breakpoint
    
-   Canvas preview step + reduced-motion safe behavior
    

How to use

1.  Paste the code component into your Framer project
    
2.  Drop it into a tall section so sticky scroll has room
    
3.  Add your step images and rewrite the process copy
    
4.  Tune scroll-per-step and colors to match your page
    

A focused storytelling component - not another generic accordion.

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

-   All · #3628

## Details

- **Author**: itserastus
- **Price**: $8.00
- **Published**: 2026-08-07
- **Updated**: 2026-08-07
- **Added**: 2026-08-07
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove