Scroll-driven video: a test run

I’ve been wanting to build a scroll-driven visual explainer for enzyme engineering — something where you scroll through a molecular animation and text annotations appear at key moments, pointing at specific residues or structural features. Before committing to that, I needed to test the underlying technique: can you get smooth, frame-accurate video scrubbing in a browser just by scrolling?

This post is that test. The video below is a short clip decomposed into 144 individual WebP frames. As you scroll, the script maps your scroll position to a frame index and swaps the <img> source. No <video> element, no seeking — just image swaps, which turns out to be much smoother. Text overlays with SVG connector lines fade in and out at configured frame ranges.

The plan is to use this same system for a proper scrollable on our enzyme engineering work soon. For now, scroll down to try it out. ▼