😩 O problema antes do GSAP
Animar elementos com CSS puro para vídeo é doloroso: keyframes manuais, temporização no olhômetro e impossibilidade de coreografar sequências complexas. O GSAP resolve isso com uma API clara e precisa.
✗ CSS puro para animação de vídeo
- ✗Temporização manual de cada keyframe — propenso a erros.
- ✗Sequências encadeadas exigem cálculo manual de delays.
- ✗Sem controle programático — não dá para "pausar na metade".
✓ GSAP para animação de vídeo
- ✓Timeline declarativa — cada elemento entra no tempo certo.
- ✓Posicionamento relativo: "<0.3" = 300ms depois do anterior.
- ✓Seek em qualquer frame — integração natural com Remotion.
⌛ Stagger — cards entrando em sequência
O stagger é o delay progressivo entre elementos de um grupo. Em vez de todos entrarem ao mesmo tempo, cada um espera um pouco pelo anterior — criando uma sensação de "cascata" profissional.
↑ Cada card entra 250ms após o anterior. Em GSAP: stagger: 0.25
gsap.from(".card", {
y: 22,
opacity: 0,
duration: 0.55,
ease: "power2.out",
stagger: 0.25 // 250ms entre cada card
});🎯 Easing — a curva que define o tom
Linear parece robótico. Ease-out parece natural. Elastic parece brincalhão. A escolha de easing é tão importante quanto o próprio movimento — ela comunica a personalidade da animação.
💡 Dica de ouro
Para UIs e slides use power2.out — entra rápido e assenta. Para elementos que saem use power2.in — começa suave e sai em velocidade. Reserve elastic para momentos pontuais de ênfase.
🎼 Timeline coreografada
A Timeline do GSAP é um maestro de animações: você define quando cada elemento entra em relação ao anterior, criando coreografias complexas com código simples.
const tl = gsap.timeline();
tl.from("#elem-a", { x: -40, opacity: 0, duration: 0.6 })
.from("#elem-b", { y: 20, opacity: 0, duration: 0.5 }, "<0.3")
.from("#elem-c", { x: 40, opacity: 0, duration: 0.7 }, "<");🔗 GSAP + Remotion — integração frame-perfect
O Remotion renderiza cada frame de forma determinística — para o mesmo número de frame, sempre o mesmo visual. O GSAP respeita isso via seek(): em vez de rodar a animação em tempo real, você "salta" para o frame exato.
🧠 Conceito central
No Remotion, useCurrentFrame() retorna o frame atual (ex.: 60 em 30fps = 2 segundos). Você converte esse frame em "segundos" e chama tl.seek(seconds) — o GSAP posiciona todos os elementos no estado correto para aquele instante.
const { fps } = useVideoConfig();
// Seek para o segundo exato deste frame
tl.seek(frame / fps);
💡 Por que não usar CSS animations?
CSS animations não têm seek(). O Remotion tira screenshots frame-a-frame — sem seek, a animação sempre apareceria no estado t=0. GSAP resolve isso nativamente.
🚀 Da landing page ao vídeo — o fluxo com Claude
A abordagem mais produtiva: pedir ao Claude uma landing page estática primeiro — componentes visuais prontos, tipografia, cores, espaçamento. Depois, em uma segunda conversa, pedir para transformar em animação GSAP para Remotion.
Prompt de layout
"Crie uma landing page React para um SaaS com hero, 3 features e CTA. Sem animações ainda."
Revisão visual
Ajusta cores, tipografia, espaçamentos. Garante que o visual está certo antes de animar.
Prompt de transformação
"Agora transforme em composição Remotion com GSAP. Hero entra em fade-up, features em stagger 0.2s, CTA com bounce."
Render e exportar
npx remotion render — MP4 pronto para publicar.
🎯 Melhor para
SaaS intros, launch videos, product walkthroughs, slides de pitch — qualquer conteúdo que tenha estrutura de seções e revelação progressiva.
📋 Resumo do módulo
O que aprendemos
- ✓GSAP é o padrão de animação web pela precisão e API clara
- ✓Stagger cria cascatas profissionais com uma linha de código
- ✓Easing define a personalidade da animação
- ✓Timeline coreografa sequências complexas com posicionamento relativo
- ✓seek() integra GSAP com o rendering determinístico do Remotion
- ✓Fluxo landing → vídeo maximiza velocidade de produção
Próximo módulo
Comparação detalhada: quando cada ferramenta brilha e por que GSAP vence no contexto de vídeo renderizado.