---
title: "AdvancedStepper — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Can Girgin · Sections. Details What it is AdvancedStepper is a flexible, icon-ready stepper for Framer."
canonical: "https://framer.elliotli.dev/component/advancedstepper"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/AdvancedStepper

# AdvancedStepper

Animated step timelines with icons

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

![AdvancedStepper preview image 1](https://framer.elliotli.dev/og/component/advancedstepper/5ce44a8e242fb232/1600x1200.jpg)

## Summary

Details What it is AdvancedStepper is a flexible, icon-ready stepper for Framer.

## Description

Animated stepper/timeline with icons. Smooth wave or straight line, “on load” or “on section” trigger, accessible text styles. Drop Canvas icons, tune colors & motion.

**Details****What it is**AdvancedStepper is a flexible, icon-ready stepper for Framer. Use it as a process timeline or feature roadmap with silky animations and clean typography.

**Highlights**

-   Wave or straight path
    
-   On Load or On Section trigger (use an element id like #services)
    
-   Auto once, Loop, or Controlled progress
    
-   Drop Canvas icons (one per step)
    
-   Title/Description fonts, sizes, gap, and vertical offset
    
-   Auto flip labels to avoid overlapping the curve
    
-   Solid (shimmer) or dashed line
    
-   Accessible label colors (active + muted)
    
-   Clickable steps (optional handler)
    

**How to use**

1.  Fill **Steps** with short titles + concise descriptions.
    
2.  Drop your **Icons (Canvas)** in the same order.
    
3.  Pick **Trigger** (On Load or On Section) and enter the target id (e.g. #services).
    
4.  Adjust **Text** group (Title Font/Size, Desc Font/Size, Title–Desc Gap, Offset from Dot).
    
5.  Style line, dot size, and colors.
    

**Tips**

-   Keep titles short (2–3 words) and descriptions 2–4 words for best readability.
    
-   For larger dots (up to 120px), increase stroke width proportionally for balance.
    
-   Prefer high-contrast label colors over your background.
    

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

-   All · #7863

## Details

- **Author**: Can Girgin
- **Price**: $10.00
- **Published**: 2025-09-09
- **Updated**: 2026-01-18
- **Added**: 2025-08-27
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes