# Scroll Video Scrub

> Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage. Apple-keynote scrub, one MP4 and a tween.

Canonical: https://gsapvault.com/effects/scroll-video-scrub
Live demo: https://gsapvault.com/demos/scroll-video-scrub/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | ScrollTrigger |
| Techniques | video-scrub, horizontal-scroll, pinning, scrub, velocity-reactive |
| Uses Lenis | Yes |

## Overview

A cinematic scroll-scrubbed video effect that maps your scroll position straight onto a real <video> element's currentTime, seeking it frame-by-frame the way Apple product pages do, but from an actual MP4 rather than a canvas image sequence.

The same pinned scroll also pans a horizontal track of chapter panels sideways across the footage, so a single gesture moves both the film and the story. Flick the wheel and the type smears with your scroll velocity before settling crisp.

## Features

- Real <video> playhead driven by ScrollTrigger progress (not a sprite sheet or canvas frames)
- Seek throttled by the video's own seeked event so requests never pile up
- Horizontal chapter track panning across the pinned film on one scrubbed timeline
- Velocity-reactive skew and blur smear that relaxes to crisp on settle
- Slow push-in on the footage plus per-chapter reveals via containerAnimation
- Live scrub rail and frame counter that read like a real video scrubber
- Touch fallback: film autoplays muted and looped with chapters stacked and revealed
- Reduced-motion and no-JS safe: poster frame holds with chapters as a readable list

## Use Cases

- Product reveal heroes that unfold cinematic footage as the visitor scrolls
- Brand and campaign landing pages wanting an Apple-grade scroll moment
- Portfolio and studio intros set over abstract or slow-motion video
- Storytelling sections where a film and its captions advance together
- Launch pages that need one clip-worthy, memorable scroll interaction

## How It Works

A single ScrollTrigger pins the stage and scrubs a timeline that translates the chapter track sideways by its measured scrollWidth and pushes the video in slightly. The trigger's onUpdate maps scroll progress onto video.currentTime; seeks are gated by an awaitingSeek flag cleared on the seeked event, and the video is shipped all-intra (a keyframe on every frame) so each seek paints instantly. Scroll velocity from getVelocity() feeds a decaying skew and blur on the track, and gsap.matchMedia swaps in an autoplay-loop backdrop on touch and a static poster under reduced motion.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Add to your HTML `<head>`:**

```html
<link rel="stylesheet" href="path/to/style.css">
```

**2. Add before closing `</body>` tag:**

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/ScrollTrigger.min.js"></script>
<!-- Optional: smoother scrub -->
<script src="https://unpkg.com/lenis@1.3.17/dist/lenis.min.js"></script>
<script src="path/to/script.js"></script>
```

**3. Add the effect HTML anywhere in your `<body>`:**

```html
<section class="reel" data-reel aria-label="Scroll-scrubbed video reel">
  <div class="reel__stage" data-reel-stage>
    <video class="reel__video" data-reel-video muted playsinline preload="auto"
           poster="poster.jpg" aria-hidden="true">
      <source src="film.mp4" type="video/mp4">
    </video>
    <div class="reel__scrim" aria-hidden="true"></div>

    <div class="reel__track" data-reel-track>
      <article class="reel__chapter reel__chapter--left">
        <div class="reel__chapter-inner">
          <span class="reel__chapter-eyebrow">Reel / 01</span>
          <h3 class="reel__chapter-title">Scroll is the scrubber</h3>
          <p class="reel__chapter-text">Your scroll position is the playhead.</p>
        </div>
      </article>
      <!-- more .reel__chapter panels... -->
    </div>

    <div class="reel__hud" aria-hidden="true">
      <span class="reel__brand">REEL // 001</span>
      <div class="reel__scrub-ui">
        <span class="reel__frame" data-reel-frame>001 / 250</span>
        <div class="reel__rail"><span class="reel__rail-fill" data-reel-rail></span></div>
        <span class="reel__hint" data-reel-hint>Scroll to scrub</span>
      </div>
    </div>
  </div>
</section>
```

### Options

Set on the `.reel` element:

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-reel-scrub` | Any number (seconds) | `0.6` | Scrub smoothing. `0` locks 1:1 to scroll; higher eases the catch-up |
| `data-reel-length` | Any number | `0.85` | Vertical scroll distance as a multiple of the horizontal track travel. Higher = slower, longer scrub |
| `data-reel-velocity` | `0` to `2` | `1` | Strength of the skew/blur smear on fast scroll. `0` disables it |

### Accessibility

- **Reduced motion**: `prefers-reduced-motion: reduce` holds the poster frame and lays the chapters out as a readable vertical list, with no pinning, scrubbing, or autoplay.
- **Touch devices**: seeking a video from touch-scroll is janky, so coarse pointers get the film autoplaying muted and looped as a backdrop, with the chapters stacked and revealed on scroll.
- **No JavaScript**: the base layout is the stacked, fully visible list, so the content is never hidden behind a class the script must add.
- **Screen readers**: the decorative film and HUD are `aria-hidden`; the chapter headings and copy remain in the reading order.

### Dependencies

**Required:**
- GSAP 3.12+
- ScrollTrigger plugin

**Optional:**
- Lenis (smooth scroll; the scrub reads noticeably smoother with it)

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Scroll Video Scrub](https://gsapvault.com/effects/scroll-video-scrub)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): Four scroll progress visualization styles using GSAP ScrollTrigger. Includes animated bar, circle, rail track, and percentage counter indicators.
- [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Pure CSS scroll-triggered entrance animations. No JavaScript required. Uses native CSS scroll-driven animations for fade, slide, and scale effects.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A layered hero section where background blobs, headline, and foreground labels scroll at different speeds, creating scrubbed parallax depth.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt
