Building a Scroll-Hoisted Flag: Why clip-path Beats scaleX for Reveal Animations
Build a scroll-triggered flag hoist in vanilla JS: sticky pinning, one progress value, and why clip-path beats scaleX for revealing circular artwork.
Building a Scroll-Hoisted Flag: Why clip-path Beats scaleX for Reveal Animations
Every August a wave of Independence Day pages ships with the same animation: a flag that autoplays on load, waves for three seconds, and is finished before anyone has scrolled far enough to see it. The visitor arrives to a loop already in progress, watches a GIF, and leaves. Nothing about it is wrong, exactly — it's just that the most participatory moment of the day, the hoisting itself, has been turned into something that happens at the viewer rather than something they do. Tying the hoist to scroll position fixes that for free. The visitor pulls the flag up the pole at their own pace, stops halfway if they want, and scrolls back to watch it again. But scroll-driven animation has a specific set of traps — reading layout on every scroll event, fighting the browser over who owns an element's transform , and one reveal technique that quietly ruins any artwork with a circle in it. Here's the finished piece; scroll it: Grab the code, or open the full editor with live HTML/CSS/JS …
