scroll-scrub-hero

Scroll-Scrub Video Hero

Build a hero section where a video scrubs frame-by-frame driven by the user's scroll position — Apple-product-page style. The video plays forward (and rewinds) exactly as fast as you scroll.

Trigger conditions:

• User wants a "scroll scrub video", "scroll-driven animation", "Apple-style hero", or "sticky video hero"
• User wants a before/after transformation revealed by scrolling
• User asks to fix a "janky" or "not smooth" scroll video
• User points to a reference (Soleiman Advocatuur, Apple product pages, Apex scroll hero)

Architecture

<section.hero>       ← 250vh tall (the scroll runway)
  <div.hero-sticky>  ← position: sticky; top: 0; height: 100vh (the viewport-pinned stage)
    <video>          ← positioned absolute, inset 0, object-fit: cover
    .hero-overlay    ← text/CTAs that fade out during scrub
    .scroll-hint     ← "Scroll" indicator that fades early

The Core Loop (rAF + Lerp)

The critical piece — a requestAnimationFrame loop that smoothly interpolates between the current scroll position and video.currentTime. This is what makes it smooth.

let duration = 0;
video.addEventListener('loadedmetadata', () => { duration = video.duration; });
if (video.readyState >= 1) duration = video.duration;

let cur = 0;
const LERP = 0.12;          // Soleiman uses 0.12, apex uses 0.14
const PIN = 1.5;            // viewport heights to scrub over

function tick() {
  requestAnimationFrame(tick);

  const p = Math.min(1, Math.max(0, window.scrollY / (window.innerHeight * PIN)));
  const target = p * duration;

  cur += (target - cur) * LERP;
  if (Math.abs(target - cur) < 0.004) cur = target;

  if (video.readyState >= 2 && Number.isFinite(cur) && duration > 0) {
    const t = Math.min(cur, duration - 0.05);
    if (Math.abs(video.currentTime - t) > 0.01) {
      video.currentTime = t;
    }
  }

  // Overlay + hint fade
  overlay.style.opacity = Math.max(0, 1 - Math.max(0, p - 0.05) / 0.2);
  hint.style.opacity = Math.max(0, 1 - p / 0.08);
}