Scroll Milestone Confetti — Free One-Time Progress Burst Effect

Rather than one big celebration at the end, this snippet marks four points down a long page — 25%, 50%, 75%, and 100% — and fires a small canvas confetti burst the first time the reader scrolls past each one, turning a long scroll into a small game with checkpoints. A fixed progress bar with four dots shows which milestones are already unlocked. Built with vanilla JavaScript, IntersectionObserver, and a lightweight canvas particle system — no confetti library required.

IntersectionObserver, fired once per milestone

Each milestone section is observed with a single IntersectionObserver at threshold: 0.4. When a milestone's isIntersecting flips true, the code checks a fired flag on that milestone's record before doing anything — so scrolling back up and passing the same milestone again does not double the confetti burst. This is the key difference from a plain scroll-position percentage check: each milestone independently remembers whether it has already celebrated.

A small, self-contained particle system

The confetti itself is a simple canvas-based particle simulation: each burst spawns ~90 rectangles with random angle, speed, color, and rotation, then a single requestAnimationFrame loop applies gravity, drag, and rotation to all live particles every frame, fading and removing each one once its lifespan elapses or it falls off-screen. No external confetti library is loaded — the whole effect is under 60 lines of canvas code.

Two independent progress signals

The top bar's fill width is driven by a continuous scroll-position percentage (scrollY / scrollable-height), updated on every scroll event, while the four dots along that same bar light up discretely based on the IntersectionObserver's one-time milestone unlocks. Reading both together — a smooth fill plus stepped unlocks — gives the reader both "how far am I" and "what have I actually earned" at a glance.

Cheap enough to run continuously

The particle loop runs every frame regardless of whether any particles are alive, but with an empty array the loop body is essentially a no-op clearRect, so there's no meaningful cost when no confetti is currently animating — no need to start and stop the rAF loop around each burst.

Customizing it

Change the milestone percentages or add more of them, swap the rectangle particles for circles or your brand's shapes, or trigger a bigger final burst at 100% than the earlier ones. Pair it with canvas confetti burst or a confetti celebration card for other confetti moments, or a scroll progress bar for the continuous-only version.