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

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.