Modulo 2.6 - GSAP & Bibliotecas Pro

Por que GSAP

GSAP (GreenSock Animation Platform) e a biblioteca de animacao mais robusta e confiavel do mercado. Quando CSS nao e suficiente e voce precisa de controle total, GSAP e a escolha dos profissionais.

🎯 Por que os Profissionais Escolhem GSAP

• Biblioteca profissional: Usada em producao por grandes empresas
• Empresas que usam: Apple, Google, Nike, Microsoft, Netflix
• Performance superior: Mais rapido que CSS em animacoes complexas
• Timeline control: Sequenciamento preciso de animacoes
• Cross-browser: Funciona identicamente em todos navegadores

📊 Dados de Mercado

11M+

sites utilizam GSAP em producao

A biblioteca de animacao mais popular do mundo

Setup e Basico

Comecar com GSAP e extremamente simples. Um CDN, uma linha de JavaScript e voce ja esta animando. Vamos explorar os metodos fundamentais e as propriedades mais usadas.

📦 Instalacao via CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

⚡ Metodos Principais

gsap.to()

Anima DO estado atual PARA o definido

gsap.from()

Anima DE um estado PARA o atual

gsap.fromTo()

Define inicio e fim explicitamente

💻 Exemplo Basico

// Animar elemento para a direita com fade
gsap.to(".box", {
  x: 200,          // Move 200px para direita
  y: 100,          // Move 100px para baixo
  scale: 1.5,      // Aumenta 50%
  rotation: 360,  // Rotacao completa
  opacity: 0.5,   // Semi-transparente
  duration: 1,    // 1 segundo
  delay: 0.5,     // Espera 0.5s
  ease: "power2.out"
});

x, y

Posicao

scale

Tamanho

rotation

Rotacao

opacity

Transparencia

Timelines

Timelines sao o superpoder do GSAP. Permitem sequenciar multiplas animacoes com controle total sobre timing, pausas, repeticoes e sincronizacao perfeita.

📋 Conceito de Timeline

fadeIn slideIn scale rotate

Animacoes sequenciadas automaticamente ou com offsets precisos

💻 Exemplo de Timeline

// Criar timeline
const tl = gsap.timeline({
  repeat: -1,      // Loop infinito
  yoyo: true,      // Vai e volta
  defaults: { duration: 0.5 }
});

// Encadear animacoes
tl.to(".titulo", { opacity: 1, y: 0 })
  .to(".subtitulo", { opacity: 1, y: 0 }, "-=0.3")
  .to(".botao", { scale: 1 }, "+=0.2")
  .addLabel("meio")
  .to(".imagem", { rotation: 360 }, "meio");

// Controles
tl.pause();   // Pausa
tl.play();    // Reproduz
tl.reverse(); // Inverte
tl.seek("meio"); // Pula para label

🔗

.to() encadeado

Sequencias fluidas

🏷️

Labels

Pontos de referencia

🔄

Repeat + Yoyo

Loops inteligentes

⏯️

Play/Pause

Controle total

ScrollTrigger Plugin

ScrollTrigger e o plugin que conecta animacoes ao scroll. E o que permite criar aquelas experiencias de scroll cinematograficas que vemos nos melhores sites do mundo.

🔌 ScrollTrigger e o Game Changer

Este plugin transformou a forma como sites profissionais sao construidos. Animacoes baseadas em scroll que antes exigiam bibliotecas complexas agora sao simples e performaticas.

📦 Setup do Plugin

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

gsap.registerPlugin(ScrollTrigger);

💻 Exemplo Completo

gsap.to(".secao", {
  x: 400,
  rotation: 360,
  scrollTrigger: {
    trigger: ".secao",     // Elemento gatilho
    start: "top center",   // Quando inicia
    end: "bottom center", // Quando termina
    scrub: true,           // Vincula ao scroll
    pin: true,             // Fixa elemento
    markers: true,         // Debug visual
    onEnter: () => console.log("Entrou!"),
    onLeave: () => console.log("Saiu!")
  }
});

start / end

Define inicio e fim do trigger

scrub

Vincula progresso ao scroll

pin

Fixa elemento durante animacao

markers

Visualiza triggers (debug)

onEnter

Callback ao entrar

onLeave

Callback ao sair

Outras Bibliotecas

GSAP nao e a unica opcao. Dependendo do projeto, framework e requisitos, outras bibliotecas podem ser mais adequadas. Conheca as principais alternativas profissionais.

⚛️

Framer Motion

Para React

A biblioteca de animacao mais popular para React. Sintaxe declarativa e integracao perfeita com componentes.

<motion.div animate={{ x: 100 }} />

Usar quando: Projetos React que precisam de animacoes

🎬

Lottie

After Effects para Web

Exporta animacoes do After Effects como JSON. Perfeito para ilustracoes animadas complexas.

lottie.loadAnimation({ path: 'anim.json' })

Usar quando: Icons animados, ilustracoes, loading states

✨

Anime.js

Leve e versatil

Biblioteca leve (~17KB) com API simples. Boa alternativa quando GSAP e demais para o projeto.

anime({ targets: '.el', translateX: 250 })

Usar quando: Projetos menores, bundle size importa

🚀

Motion One

Moderna e performatica

Usa Web Animations API nativa. Extremamente leve (~3KB) e performatica. O futuro das animacoes web.

animate('.el', { x: 100 }, { duration: 1 })

Usar quando: Performance critica, projetos modernos

📊 Quando Usar Cada Uma

GSAP: Projetos complexos, controle total, compatibilidade maxima

Framer Motion: Projetos React, animacoes de componentes

Lottie: Ilustracoes animadas, icones, loading states

Anime.js: Projetos simples, bundle size importa

Motion One: Projetos modernos, performance extrema

Projeto Pratico

Vamos aplicar tudo que aprendemos criando uma landing page com animacoes profissionais: hero animado, secoes com ScrollTrigger e efeito de texto letra por letra.

🎯 O que Vamos Criar

🎬

Hero Timeline

Animacao de entrada orquestrada com titulo, subtitulo e CTA

📜

ScrollTrigger Sections

Cada secao anima ao entrar na viewport

✍️

Text Split

Animacao letra por letra com SplitText

💻 Codigo Base do Projeto

// Registrar plugins
gsap.registerPlugin(ScrollTrigger);

// 1. HERO TIMELINE
const heroTl = gsap.timeline({ defaults: { ease: "power3.out" }});

heroTl
  .from(".hero-title", { y: 100, opacity: 0, duration: 1 })
  .from(".hero-subtitle", { y: 50, opacity: 0 }, "-=0.5")
  .from(".hero-cta", { scale: 0, opacity: 0 }, "-=0.3");

// 2. SECOES COM SCROLLTRIGGER
gsap.utils.toArray(".section").forEach(section => {
  gsap.from(section, {
    y: 100,
    opacity: 0,
    duration: 1,
    scrollTrigger: {
      trigger: section,
      start: "top 80%",
      end: "top 50%",
      toggleActions: "play none none reverse"
    }
  });
});

// 3. TEXTO LETRA POR LETRA
const text = ".animated-text";
const chars = text.textContent.split("");
text.innerHTML = chars.map(c =>
  `<span class="char">${c}</span>`
).join("");

gsap.from(".char", {
  opacity: 0,
  y: 50,
  stagger: 0.05,
  duration: 0.5,
  ease: "back.out"
});

"Ferramentas profissionais para resultados profissionais. GSAP e o padrao da industria por um motivo."

— Resumo do Modulo

📋 Resumo do Modulo

✓

GSAP - Biblioteca profissional usada por 11M+ sites

✓

Metodos Basicos - gsap.to(), from(), fromTo() para animacoes

✓

Timelines - Sequenciamento preciso com labels e controles

✓

ScrollTrigger - Vincular animacoes ao scroll da pagina

✓

Alternativas - Framer Motion, Lottie, Anime.js, Motion One

Proximo Modulo:

2.7 - Projeto Final de Animacao

← Modulo Anterior Proximo Modulo →