# Motion

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

```sh
pnpm add glazejs motion
```

```ts
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" },
})
```

```html
<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:

```sh
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:

```html
<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.