GSAP Video Scroll (Divi)

A real video scrubbed forwards and backwards by the scroll. Each demo is labelled with its settings. Scroll slowly — and back up.

1. Held section, two captions

Source: Media Library (ridge sunrise, poster set) · Hold the Section on · scroll length 300 · smoothing 0.6 · Accessible Description set · captions “First light” 2–30 % bottom left and “Over the ridge” 40–70 % middle right.

First light

Scroll to move through the morning.

Over the ridge

Every frame follows your scroll — back up to see it again.

Scroll ↓

2. Not held — plays through as it scrolls past

Source: Media Library (aurora, poster set) · Hold the Section off · Fit Contain · height 70vh (50vh on phones) · border radius 24 px · shade 0 · background #020617 · Caption Box: background rgba(15,23,42,0.75), padding 18 px 22 px, rounded 14 px · captions middle and top right.

Northern lights

Filmed on a phone, scrubbed by your scroll.

Keep going

Scroll ↓

3. External URL, long and smooth

Source: External URL (the same ridge file, by its link; no poster) · scroll length 500 · smoothing 1.5 · title tag H2 · caption colour #fde68a · Caption Title font 44 px / 800 · three captions bottom centre, top left and bottom right.

Five screens long

More scroll per second of video feels slower and calmer.

Smoothing 1.5

The picture glides to where you stopped.

The end

Scroll on.

Scroll ↓

4. Play in view

Playback: Play in view · Loop on · Aspect Ratio 16:9 · Shade Colour #0b1d4a at 0.35 · one caption 5–95 % of the playback, middle. The clip plays on its own while on screen and pauses when it leaves.

Plays when you arrive

And pauses when you scroll away.

Scroll ↓

5. Image sequence, held 15 % down

Source: Image sequence (12 product photos) · Load Frames: with the page · Image Smoothing: crisp · Top Offset 15vh · Aspect Ratio 21:9 · Scroll Length 200 (120 on phones) · caption 40–80 %.

Scroll ↓

6. Not held, custom start and end, part of the video, full screen width

Hold the Section off · Starts when the top reaches 90 % · Ends when the bottom reaches 10 % · Play from 20 % to 80 % of the video · Full Screen Width on (this row is boxed) · Fit: Stretch · Height 60vh.

The middle of the morning

Only 20–80 % of the clip is used.

Scroll ↓

7. Play in view with controls, once, first half, still on phones

Playback: Play in view · Loop off · Show Controls on · Play to 50 % · On Phones: still · Aspect Ratio 4:3 · Fit: Contain.

Press pause any time

It plays the first half once.

The end — scroll back up to replay