AdvancedStepper

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

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 Fill Steps with short titles + concise descriptions. Drop your Icons (Canvas) in the same order. Pick Trigger (On Load or On Section) and enter the target id (e.g. #services). Adjust Text group (Title Font/Size, Desc Font/Size, Title–Desc Gap, Offset from Dot). 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.

Animated step timelines with icons