Independence Day Flag Hoist — Free Scroll Animation Snippet

Most festive flag animations on the web autoplay on page load, finish before anyone has looked at them, and draw the flag with whatever proportions happened to fit the layout. This snippet takes the opposite approach on both counts. The entire sequence — the bundle climbing the pole, the cloth unfurling, the chakra turning, the petal shower, the greeting — is mapped to scroll position, so the viewer performs the hoisting themselves at their own pace, and every dimension follows the official specification of the Indian national flag.

Scroll progress as the single source of truth

A tall .ind-section holds a position: sticky stage that pins for the duration of the scroll. On every frame the handler reads section.getBoundingClientRect() and computes progress as -rect.top / (section.offsetHeight - window.innerHeight), clamped to 0..1. That one number drives everything else, which means there is no timeline to keep in sync, no autoplay to miss, and scrubbing backwards runs the whole sequence in reverse for free. The scroll listener is registered { passive: true } and throttled through requestAnimationFrame with a ticking flag, so the browser never queues more than one layout read per frame.

Phases that own their own slice of the scroll

A small phase(p, start, end) helper remaps the global 0..1 progress onto a sub-range and clamps outside it, so the hoist runs from 4% to 56% of the scroll, the unfurl from 56% to 78%, and the greeting appears past 85%. Adding or re-timing a stage means changing two numbers rather than restructuring the logic. The hoist itself is passed through an easeOut cubic so the flag decelerates as it reaches the finial, the way a real halyard is eased off at the top.

Unfurling with clip-path instead of a scale transform

The obvious way to open a flag is transform: scaleX() from the pole edge, and it is the wrong one: scaling the container stretches everything inside it, so the Ashoka Chakra becomes an ellipse that only rounds out at the final frame. This snippet animates clip-path: inset(0 N% 0 0) instead, revealing the cloth left to right while every child keeps its true geometry. The chakra is a perfect circle at 1% open and at 100% open. A separate rolled .ind-bundle element rides the pole during the climb and fades out as the unfurl begins, matching the way a flag is actually hoisted furled and then released.

A chakra built to specification

The flag's proportions are 3:2, expressed as --fh: calc(var(--fw) / 1.5) so the ratio holds at every viewport width. Each of the three bands takes an equal third, and the Ashoka Chakra is sized at three quarters of the white band's height — the ratio laid down in the flag code. The 24 spokes are generated in a loop, each one a thin absolutely-positioned bar with transform-origin: 50% 0 pivoting on the hub, rotated by i * 15 degrees. Because the spokes pivot on a shared centre point, the layout is exact rather than eyeballed, and the whole chakra is rotated as a unit by the scroll progress.

Motion that respects the reader

The waving animation is a CSS keyframe on the flag element only, applied via a .waving class once the unfurl completes, so it never fights the inline clip-path the scroll handler is writing. The petal shower is created once in JavaScript with randomised positions, colours and durations, then triggered by a single class toggle — and it rearms if the visitor scrolls back up, so the sequence is repeatable rather than one-shot. A prefers-reduced-motion check skips petal generation entirely and a matching media query disables the wave and sheen keyframes, leaving the scroll-driven hoist itself intact for readers who have asked for less motion.