voltar para o lab
[ Estudo de scroll e motion ]

Scroll-scrub: o scroll vira a timeline de um vídeo

GSAPScrollTriggerLenis

[ 2026 ]

Scroll-scrub

Um vídeo ocupa a tela inteira e fica preso enquanto uma seção alta é percorrida. A posição do scroll vira a linha do tempo do clipe: rolar para baixo avança os quadros, rolar para cima rebobina. Sem player e sem controles — o tempo do vídeo é a posição da página. O clipe é abstrato, gerado na paleta do estudo (charcoal → âmbar → creme).

O que explora

  • O scroll dirige o `video.currentTime` diretamente, com a seção pinada em tela cheia (ScrollTrigger pin + scrub).
  • Seek suavizado — o scroll define um tempo-alvo e o loop aproxima o currentTime dele a cada quadro (lerp), porque seek direto a cada frame trava.
  • Vídeo mudo com `playsinline` pra poder setar o currentTime sem gesto do usuário; Lenis pra deixar a raspagem amanteigada.
  • Clipe gerado com keyframes densos, porque o seek fica mais suave quanto mais keyframes o vídeo tem — trocar a fonte é só apontar para outro arquivo.

Estados

[ Pinar ] o vídeo trava em tela cheia enquanto a seção alta é percorrida
[ Raspar ] a posição do scroll vira o currentTime, quadro a quadro
[ Rebobinar ] rolar pra cima volta no tempo — nada é linear
[ abrir experimento → ]