About AdvancedStepper
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.
DetailsWhat it isAdvancedStepper 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.
