Three to five. Six or more and people stop reading the numbers.

Do the steps need labels?

Yes. A fill tells someone how far along they are. The label tells them what they are doing.

Yes, and it should. Tween the same line down when someone steps back, or the progress claim stops being true.

Is this a scroll progress bar?

No. This counts steps someone finishes. A scroll bar reports how much page is left.

What does reduced motion do?

Snap the line to the new step, with no tween.

Step-by-step timeline

A process line that fills to the step you are on. One, then two, then three.

SlidersBuild difficulty: EasyscaleX

Also called Stepper, Process line.

Here it is working.

Pick a step. The line fills to match.

For designers

A stepper is a progress claim, so the line has to be honest: scaleX is the current step divided by the total, and nothing else. Three to five steps. Past five, people stop counting and the line stops meaning anything. Label the steps, because a fill tells someone how far through they are and not what they are doing. The numbers carry the information and the fill is the cue. Give it about 400 milliseconds so the change is visible without holding anyone up, and tween it back down when someone steps back. On reduced motion, snap the line to the new step.

Use this when

A short how-to, onboarding, or checkout
Three to five steps
The line is the progress, not a film strip of scenes

Reach for something else when

A page scroll bar. Use Progress.
A numbered counter. Use Counter.
A timeline of years with pinned scenes. That is a longer page.

How to build it

A line whose scaleX is step divided by total. Tween it when the step changes. Buttons or scroll can own the step. Reduced motion: snap the line.

Official GSAP

gsap.to scaleX. Optional ScrollTrigger.

gsap.to('.line', { scaleX: step / total, transformOrigin: 'left center', duration: 0.4, ease: 'power2.out' });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

How many steps?: Three to five. Six or more and people stop reading the numbers.
Do the steps need labels?: Yes. A fill tells someone how far along they are. The label tells them what they are doing.
Can it go backwards?: Yes, and it should. Tween the same line down when someone steps back, or the progress claim stops being true.
Is this a scroll progress bar?: No. This counts steps someone finishes. A scroll bar reports how much page is left.
What does reduced motion do?: Snap the line to the new step, with no tween.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Expanding strip