# Motion

El adaptador Motion usa las secuencias de animación del DOM de Motion. Instale el paquete público y 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>
```

No necesita GSAP para esta configuración. El análisis sintáctico, los valores predeterminados, los selectores, los ajustes preestablecidos, la observación y los métodos del ciclo de vida se comparten entre ambos motores.

Las declaraciones del DOM de Motion 14.6 hacen referencia a un tipo proporcionado por `@types/react`. En proyectos TypeScript estrictos que comprueban las declaraciones de dependencias, instale también los tipos como dependencia de desarrollo. React no es necesario:

```sh
pnpm add -D @types/react
```

Incluya `"react"` en `compilerOptions.types` cuando la configuración de TypeScript restrinja los paquetes de tipos ambientales.

## Valores admitidos

- Propiedades del DOM de Motion con valores numéricos o de cadena, incluidos opacidad, transformaciones y colores.
- `from`, `to` y estados emparejados `from`/`to`. Una animación `from` termina con el estilo natural del elemento si no se proporciona un valor `to`.
- Valores numéricos de `duration`, `delay`, `repeatDelay` y `stagger` en segundos.
- Valores de `repeat` de elemento de 0 a 19 y `yoyo` booleano. Use la repetición de la línea de tiempo para repeticiones más largas o infinitas.
- `defaults`, `delay`, `repeatDelay`, `repeat` y `yoyo` de la línea de tiempo; `repeat--1` la repite indefinidamente.
- Posiciones numéricas de la línea de tiempo, colocación secuencial, `<`, `>` y desplazamientos relativos como `+=0.2`, `-=0.2` y `<+=0.2`.
- Funciones de suavizado con nombre de Motion, `linear`/`none` y nombres comunes de funciones de suavizado GSAP: de `power0` a `power4`, `sine`, `expo`, `circ` y `back`, con los sufijos `.in`, `.out` o `.inOut`.
- GSAP alias de rotación como `rotation`, que se asigna a `rotate` de Motion.

Por ejemplo, anime los elementos secundarios en secuencia con un solapamiento:

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

## Límites específicos del motor

El adaptador genera un error con los ajustes exclusivos de GSAP, incluidos ScrollTrigger, los complementos de GSAP, `autoAlpha`, las transformaciones porcentuales como `xPercent`, las utilidades de devolución de llamada, los objetos `attr`/`css` anidados y los valores relativos de propiedades como `x-+=100`. Tampoco se admiten las posiciones porcentuales de la línea de tiempo ni el escalonamiento en forma de objeto. Use el adaptador GSAP cuando necesite esas funciones.

Que las utilidades sean compatibles no implica que ambos motores interpolen de la misma forma. Motion controla la reproducción de las animaciones y la interpolación de propiedades.

## Limpieza

Use `animations.refresh()` después de las actualizaciones del DOM o active `watch`. Llame a `animations.destroy()` al desmontar. Cancela la reproducción de Motion, elimina los detectores de consultas de medios y los observadores, y restaura los estilos en línea originales.