Progress Bar Example

Scroll down. Watch the bar. Something is about to happen.

You Just Triggered It

See that bar above? It just moved. By scrolling here, you set off an On View trigger — an interaction that fires the moment a section enters your viewport.

State by State

The progress bar above has 7 states — one for each section you'll pass through. Each state is just a wider width. The transition between them? A smooth 600ms ease.

The Beauty of “Once”

Each trigger fires once. Scroll back up — the bar stays put. That's the "once" behavior. It only moves forward, like a good story.

Almost There

You've triggered 5 of 6 states. The bar is nearly full. One more section and you'll complete the journey.

100%

You did it. Six sections. Six triggers. One progress bar. That's the On View trigger.

Now go build your own →