anton-abyzov/vskill

GSAP

Contrato HyperFrames

O HyperFrames controla o GSAP através do seu adaptador de runtime gsap. Crie uma timeline pausada de forma síncrona, registre-a em window.__timelines com o data-composition-id exato e deixe o HyperFrames buscar nela.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script>
  window.__timelines = window.__timelines || {};
  const tl = gsap.timeline({ paused: true });

  tl.from(".title", { y: 48, opacity: 0, duration: 0.6, ease: "power3.out" }, 0);
  tl.to(".accent", { scaleX: 1, duration: 0.5, ease: "power2.out" }, 0.25);

  window.__timelines["main"] = tl; // a chave deve ser igual a data-composition-id na raiz da composição
</script>

• A chave do registro deve corresponder ao data-composition-id da raiz da composição.
• Não chame tl.play() para movimentos críticos de renderização.
• Não construa timelines dentro de código assíncrono, temporizadores ou manipuladores de eventos.
• Mantenha os loops finitos. O HyperFrames renderiza durações de vídeo finitas.

Métodos Principais de Tween

• gsap.to(targets, vars) — anima do estado atual para vars. Mais comum.
• gsap.from(targets, vars) — anima de vars para o estado atual (entradas).
• gsap.fromTo(targets, fromVars, toVars) — início e fim explícitos.
• gsap.set(targets, vars) — aplica imediatamente (duração 0).

Sempre use nomes de propriedades camelCase (ex.: backgroundColor, rotationX).

vars comuns

• duration — segundos (padrão 0.5).
• delay — segundos antes do início.
• ease — "power1.out" (padrão), "power3.inOut", "back.out(1.7)", "elastic.out(1, 0.3)", "none".
• stagger — número 0.1 ou objeto: { amount: 0.3, from: "center" }, { each: 0.1, from: "random" }.
• overwrite — false (padrão), true ou "auto".
• repeat — número finito; nunca -1 no HyperFrames. Calcule repetições a partir da duração visível. yoyo — alterna direção com repeat.
• onComplete, onStart, onUpdate — callbacks.
• immediateRender — padrão true para from()/fromTo(). Defina false em tweens posteriores que visam a mesma propriedade+elemento para evitar sobrescrita.

Transformações e CSS

Prefira os aliases de transformação do GSAP em vez da string transform bruta:

Propriedade GSAP	Equivalente
x, y, z	translateX/Y/Z (px)
xPercent, yPercent	translateX/Y em %
scale, scaleX, scaleY	scale
rotation	rotate (graus)
rotationX, rotationY	rotação 3D
skewX, skewY	skew
transformOrigin	transform-origin

• autoAlpha — prefira em vez de opacity. Em 0: também define visibility: hidden.
• Variáveis CSS — "--hue": 180.
• svgOrigin (apenas SVG) — origem do espaço de coordenadas SVG global. Não combine com transformOrigin.
• Rotação direcional — "360_cw", "-170_short", "90_ccw".
• clearProps — "all" ou separado por vírgulas; remove estilos inline ao finalizar.
• Valores relativos — "+=20", "-=10", "*=2".

Valores Baseados em Função

gsap.to(".item", {
  x: (i, target, targets) => i * 50,
  stagger: 0.1,
});

Easing

Eases embutidos: power1–power4, back, bounce, circ, elastic, expo, sine. Cada um tem .in, .out, .inOut.

Defaults

gsap.defaults({ duration: 0.6, ease: "power2.out" });

Controlando Tweens

const tween = gsap.to(".box", { x: 100 });
tween.pause();
tween.play();
tween.reverse();
tween.kill();
tween.progress(0.5);
tween.time(0.2);

gsap.matchMedia() (Responsivo + Acessibilidade)

Executa a configuração apenas quando uma media query corresponde; reverte automaticamente quando para de corresponder.

let mm = gsap.matchMedia();
mm.add(
  {
    isDesktop: "(min-width: 800px)",
    reduceMotion: "(prefers-reduced-motion: reduce)",
  },
  (context) => {
    const { isDesktop, reduceMotion } = context.conditions;
    gsap.to(".box", {
      rotation: isDesktop ? 360 : 180,
      duration: reduceMotion ? 0 : 2,
    });
  },
);

---

Timelines

Criando uma Timeline

const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { opacity: 0 });

Parâmetro de Posição

O terceiro argumento controla o posicionamento:

• Absoluto: 1 — em 1s
• Relativo: "+=0.5" — após o final; "-=0.2" — antes do final
• Rótulo: "intro", "intro+=0.3"
• Alinhamento: "<" — mesmo início do anterior; ">" — após o anterior terminar; "<0.2" — 0.2s após o anterior iniciar

tl.to(".a", { x: 100 }, 0);
tl.to(".b", { y: 50 }, "<"); // mesmo início que .a
tl.to(".c", { opacity: 0 }, "<0.2"); // 0.2s após .b iniciar

Rótulos

tl.addLabel("intro", 0);
tl.to(".a", { x: 100 }, "intro");
tl.addLabel("outro", "+=0.5");
tl.play("outro");
tl.tweenFromTo("intro", "outro");

Opções da Timeline

• paused: true — cria pausada; chame .play() para iniciar.
• repeat, yoyo — aplica-se a toda a timeline.
• defaults — vars mescladas em cada tween filho.

Aninhando Timelines

const master = gsap.timeline();
const child = gsap.timeline();
child.to(".a", { x: 100 }).to(".b", { y: 50 });
master.add(child, 0);

Controle de Reprodução

tl.play(), tl.pause(), tl.reverse(), tl.restart(), tl.time(2), tl.progress(0.5), tl.kill().

---

Desempenho

Prefira Transform e Opacity

Animar x, y, scale, rotation, opacity permanece no compositor. Evite width, height, top, left quando transformações alcançam o mesmo efeito.

will-change

will-change: transform;

Apenas em elementos que realmente animam.

gsap.quickTo() para Atualizações Frequentes

let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
  yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
container.addEventListener("mousemove", (e) => {
  xTo(e.pageX);
  yTo(e.pageY);
});

Stagger > Muitos Tweens

Use stagger em vez de tweens separados com delays manuais.

Limpeza

Pause ou mate animações fora da tela.

---

Referências (carregadas sob demanda)

• references/effects.md — Efeitos prontos: texto de máquina de escrever, visualizador de áudio. Leia quando precisar de padrões de efeitos prontos para HyperFrames.

Melhores Práticas

• Use nomes de propriedades camelCase; prefira aliases de transformação e autoAlpha.
• Prefira timelines em vez de encadeamento com delay; use o parâmetro de posição.
• Adicione rótulos com addLabel() para sequenciamento legível.
• Passe defaults no construtor da timeline.
• Armazene o valor de retorno do tween/timeline ao controlar a reprodução.

Não Faça

• Animar propriedades de layout (width/height/top/left) quando transformações são suficientes.
• Usar svgOrigin e transformOrigin no mesmo elemento SVG.
• Encadear animações com delay quando uma timeline pode sequenciá-las.
• Criar tweens antes do DOM existir.
• Pular a limpeza — sempre mate tweens quando não forem mais necessários.
• Usar valores de repetição infinitos em composições HyperFrames. Use contagens de repetição finitas calculadas a partir da duração visível.

Créditos e Referências

• Código fonte do adaptador HyperFrames: packages/core/src/runtime/adapters/gsap.ts.
• Documentação GSAP: https://gsap.com/docs/v3/
• Comportamento de pausa e busca da timeline GSAP: https://gsap.com/docs/v3/GSAP/Timeline/pause%28%29/