# Motion

Adaptér Motion používá sekvence animací DOM v Motion. Nainstalujte veřejný balíček a 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>
```

Pro toto nastavení nepotřebujete GSAP. Základní parsování, výchozí hodnoty, selektory, předvolby, sledování i metody životního cyklu jsou společné pro oba enginy.

Deklarace DOM v Motion 14.6 odkazují na typ dodávaný pomocí `@types/react`. Pokud používáte projekty s přísným TypeScript, které kontrolují deklarace závislostí, nainstalujte také typy jako vývojovou závislost. Samotné React není potřeba:

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

Pokud vaše konfigurace TypeScript omezuje balíčky ambientních typů, zahrňte `"react"` do `compilerOptions.types`.

## Podporované hodnoty

- Vlastnosti DOM v Motion s číselnými nebo řetězcovými hodnotami, včetně průhlednosti, transformací a barev.
- `from`, `to` a párové stavy `from`/`to`. Animace `from` končí na přirozeném stylu prvku, pokud není zadána hodnota `to`.
- Číselné hodnoty `duration`, `delay`, `repeatDelay` a `stagger` v sekundách.
- Hodnoty prvku `repeat` od 0 do 19 a logická hodnota `yoyo`. Pro delší nebo nekonečné opakování použijte opakování časové osy.
- `defaults`, `delay`, `repeatDelay`, `repeat` a `yoyo` časové osy; `repeat--1` časovou osu opakuje donekonečna.
- Číselné pozice na časové ose, sekvenční umístění, `<`, `>` a relativní posuny, například `+=0.2`, `-=0.2` a `<+=0.2`.
- Pojmenované funkce easing v Motion, `linear`/`none` a běžné názvy funkcí easing GSAP: od `power0` do `power4`, dále `sine`, `expo`, `circ` a `back` s příponami `.in`, `.out` nebo `.inOut`.
- GSAP aliasy rotace, například `rotation`, mapované na `rotate` v Motion.

Například animujte potomky postupně s překrytím:

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

## Omezení specifická pro engine

Adaptér vyvolá chybu u nastavení dostupných pouze v GSAP, včetně ScrollTrigger, pluginů GSAP, `autoAlpha`, procentuálních transformací, jako je `xPercent`, obslužných funkcí zpětného volání, vnořených objektů `attr`/`css` a relativních hodnot vlastností, jako je `x-+=100`. Procentuální pozice na časové ose a rozložené objekty nejsou také podporovány. Pokud tyto funkce potřebujete, použijte adaptér GSAP.

Podporované nástroje nezaručují shodnou interpolaci v obou enginech. Přehrávání animací a interpolaci vlastností zajišťuje Motion.

## Úklid

Po aktualizaci DOM použijte `animations.refresh()` nebo zapněte `watch`. Při odpojení zavolejte `animations.destroy()`. Zruší přehrávání v Motion, odebere posluchače mediálních dotazů a pozorovatele a obnoví původní vložené styly.