Hero Scrub | Glen Aering
Craft Chocolate
Hero Scrub animation#7 of 32WebHow this animation works
Animations example for Web: pinned hero with a scroll-scrubbed frame sequence and staged text beats.
Trigger: page scroll through a tall runway (~700–800vh) while the hero stays stuck to the viewport.
Motion: scroll progress scrubs a preloaded image sequence (~120 frames) on a canvas frame-by-frame; overlaid text panels fade and slide in and out at defined progress ranges (chapter beats), and a progress bar with beat labels tracks position. Fully reversible — scrolling back rewinds both footage and copy.
Structure: sticky 100vh stage inside a tall section; panels gated by per-beat progress windows. Best for: product or story heroes told in chapters over one continuous shot.
