Motion

O adaptador Motion usa sequências de animação DOM do Motion. Instale o pacote público e o Motion:

pnpm add glazejs motion

import glaze from "glazejs"
import { createMotionAdapter } from "glazejs/motion"
import { animate, stagger } from "motion"

const animations = glaze({
  adapter: createMotionAdapter({ animate, stagger }),
  breakpoints: { md: "(min-width: 768px)" },
  defaults: { element: "duration-0.6" },
  presets: { rise: "from:opacity-0|y-24" },
})

<div data-animate="preset-rise"></div>
<div data-animate="from:opacity-0 to:opacity-1|x-120"></div>
<div data-animate="@md:from:rotate-180|scale-0.5"></div>

Você não precisa de GSAP para esta configuração. A análise central, os padrões, os seletores, as predefinições, o monitoramento e os métodos do ciclo de vida são compartilhados pelos dois mecanismos.

As declarações DOM do Motion 14.6 fazem referência a um tipo fornecido por @types/react. Para projetos TypeScript estritos que verificam declarações de dependências, instale também os tipos como dependência de desenvolvimento. React em si não é necessário:

pnpm add -D @types/react

Inclua "react" em compilerOptions.types quando sua configuração de TypeScript restringir os pacotes de tipos globais.

Valores compatíveis

• Propriedades DOM do Motion com valores numéricos ou de string, incluindo opacidade, transformações e cores.
• from, to e estados emparelhados from/to. Uma animação from termina no estilo natural do elemento quando nenhum valor to é fornecido.
• Valores numéricos de duration, delay, repeatDelay e stagger em segundos.
• Valores de repeat do elemento entre 0 e 19 e yoyo booleano. Use a repetição da linha do tempo para repetições mais longas ou infinitas.
• defaults, delay, repeatDelay, repeat e yoyo da linha do tempo; repeat--1 da linha do tempo repete indefinidamente.
• Posições numéricas na linha do tempo, posicionamento sequencial, <, > e deslocamentos relativos, como +=0.2, -=0.2 e <+=0.2.
• Funções de easing nomeadas do Motion, linear/none e nomes comuns de easing GSAP: power0 a power4, sine, expo, circ e back, com sufixos .in, .out ou .inOut.
• GSAP aliases de rotação, como rotation, mapeados para rotate do Motion.

Por exemplo, anime os elementos filhos em sequência com uma sobreposição:

<div data-animate="tl defaults:duration-0.6">
  <div data-animate="from:opacity-0|y-24"></div>
  <div data-animate="from:opacity-0|y-24 tl:[-=0.2]"></div>
</div>

Limitações específicas do mecanismo

O adaptador gera um erro para configurações exclusivas do GSAP, incluindo ScrollTrigger, plugins GSAP, autoAlpha, transformações percentuais como xPercent, utilitários de callback, objetos attr/css aninhados e valores relativos de propriedades, como x-+=100. Posições percentuais na linha do tempo e escalonamento no formato de objeto também não são compatíveis. Use o adaptador GSAP quando esses recursos forem necessários.

A compatibilidade dos utilitários não implica interpolação idêntica entre os dois mecanismos. O Motion controla a reprodução das animações e a interpolação das propriedades.

Limpeza

Use animations.refresh() após atualizações do DOM ou habilite watch. Chame animations.destroy() ao desmontar. Isso cancela a reprodução do Motion, remove listeners de consultas de mídia e observadores e restaura os estilos inline originais.