Book a call
← All work

Custom section

Scroll-driven video section

A theme section where scroll position drives video playback, so the customer scrubs the footage by scrolling the page.

Role
Custom section
Stack
Shopify OS 2.0 · Liquid · Vanilla JS
Scrolling advances the footage frame by frame; scrolling back rewinds it.

A section that ties video playback to scroll position. Instead of playing on a timer, the footage advances as the customer scrolls and rewinds when they scroll back — so a product can be turned, opened or assembled at whatever pace the customer chooses.

Why it’s a section, not a one-off

It’s built as a configurable Shopify section, so the merchandising team drops it onto any page and sets its own video and copy from the theme editor. The technique is reusable rather than a bespoke build per campaign.

Constraints that shaped it

Scroll-linked playback is easy to build badly. Two things it has to get right: it must not fight the browser’s own scrolling, and it must degrade when the customer has asked for reduced motion — in which case it should simply be a video rather than a scroll trap.

This is my own section rather than client work, built to have the technique ready when a brand wants it.

Want something like this on your store?

Free 20-minute call. You leave with a concrete list of what I’d fix first.

Book a call