Vídeo no scroll Animações

O que é

Diferente do Vídeo tradicional (onde o relógio avança sozinho com o play), no vídeo no scroll não existe botão play. O vídeo fica sempre pausado e a rodinha do mouse ou o toque do visitante é quem aponta para cada instante do arquivo.

Como funciona

Tudo se resume a uma única fórmula matemática: tempo = progresso × duração. Conforme a seção passa pela tela, o SWCore calcula o progresso de 0.0 a 1.0 e interpola o currentTime do vídeo suavemente via requestAnimationFrame, evitando travamentos bruscos nos quadros-chave (keyframes) do MP4.

Exemplos

<!-- 
  Guarde apenas esta fórmula:
  tempo (segundos) = progresso do scroll (0.0 a 1.0) * duracao total
  Exemplo: 50% de scroll em vídeo de 3.83s = 1.92 segundos
-->

<!-- Teste a precisão milimétrica do cálculo antes de testar com a rolagem -->
<div class="demo-video-box">
  <video id="manual-scrub-video" playsinline preload="auto" poster="garden-poster.webp">
    <source src="garden-scroll.mp4" type="video/mp4">
  </video>
  <input type="range" id="manual-scrub-range" min="0" max="1000" value="0">
</div>

<!-- O vídeo avança ou volta suavemente conforme você rola a tela -->
<div class="demo-video-box">
  <video data-sw="video-scroll" data-sw-scrub="0.3" playsinline preload="auto" poster="garden-poster.webp">
    <source src="garden-scroll.mp4" type="video/mp4">
  </video>
  <div class="demo-canvas-overlay-info">
    <span class="demo-canvas-pill">VÍDEO NO SCROLL (SCRUB 0.3s)</span>
    <span style="font-size:.8rem; color:#94a3b8;">Role para baixo ou para cima</span>
  </div>
</div>

<!-- O container prende o vídeo no centro enquanto você rola 3 capítulos de texto -->
<div class="demo-video-story" data-sw="video-scroll" data-sw-scrub="0.4">
  <div class="demo-video-story-stage">
    <video playsinline preload="auto" poster="garden-poster.webp">
      <source src="garden-scroll.mp4" type="video/mp4">
    </video>
  </div>
  <div class="demo-video-story-flow">
    <div class="demo-video-story-card">
      <span class="demo-canvas-pill" style="margin-bottom:.5rem; display:inline-block;">01 · INTRODUÇÃO</span>
      <h3 style="color:#fff; margin-bottom:.5rem;">A Câmera Inicia o Vôo</h3>
      <p style="color:var(--text-muted); font-size:.85rem; margin:0;">Conforme você rola a página, o vídeo avança sincronizado com a leitura.</p>
    </div>
    <div class="demo-video-story-card">
      <span class="demo-canvas-pill" style="margin-bottom:.5rem; display:inline-block;">02 · MEIO DA JORNADA</span>
      <h3 style="color:#fff; margin-bottom:.5rem;">Exploração do Espaço</h3>
      <p style="color:var(--text-muted); font-size:.85rem; margin:0;">O vídeo responde instantaneamente no vai e vem do scroll sem travar.</p>
    </div>
    <div class="demo-video-story-card">
      <span class="demo-canvas-pill" style="margin-bottom:.5rem; display:inline-block;">03 · CONCLUSÃO</span>
      <h3 style="color:#fff; margin-bottom:.5rem;">A Chegada ao Destino</h3>
      <p style="color:var(--text-muted); font-size:.85rem; margin:0;">O último milissegundo do vídeo estabiliza na entrega final.</p>
    </div>
  </div>
</div>

<!-- 
  Basta adicionar data-sw="video-scroll" e data-sw-scrub="0.3" na tag <video>:
-->
<video 
  data-sw="video-scroll" 
  data-sw-scrub="0.3" 
  playsinline 
  preload="auto" 
  poster="poster.webp">
  <source src="video-animacao.mp4" type="video/mp4">
</video>

Atributos

Variantes

Eventos

API (JavaScript)

Requisitos

• Precisa do gsap-bundle.js carregado para cálculo do ScrollTrigger.
• Sempre adicione playsinline para compatibilidade universal em navegadores móveis (Safari iOS e Android).

Limitações — o que ele não faz

• O arquivo MP4 deve ter keyframes (quadros-chave) frequentes (ex: a cada 0.2s ou 6 frames) para que o navegador consiga fazer o salto milissegundo a milissegundo de forma suave.
• Se a animação for muito curta (menos de 60 frames) com exigência de precisão pixel-perfect, uma sequência de imagens WebP (ver Frames) pode ser ainda mais nítida que vídeo comprimido.