# Motion

Adaptér Motion používa DOM sekvencie animácií z Motion. Nainštalujte verejný balík 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>
```

Pre toto nastavenie nepotrebujete GSAP. Základné parsovanie, predvolené hodnoty, selektory, predvoľby, sledovanie a metódy životného cyklu sú spoločné pre oba enginy.

Deklarácie DOM v Motion 14.6 odkazujú na typ poskytovaný `@types/react`. V projektoch TypeScript, ktoré kontrolujú deklarácie závislostí, nainštalujte tieto typy aj ako vývojovú závislosť. Samotný React nie je potrebný:

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

Zahrňte `"react"` do `compilerOptions.types`, keď konfigurácia TypeScript obmedzuje balíky globálnych typov.

## Podporované hodnoty

- Vlastnosti Motion DOM s číselnými alebo reťazcovými hodnotami vrátane opacity, transformácií a farieb.
- `from`, `to` a párové stavy `from`/`to`. Animácia `from` sa skončí prirodzeným štýlom prvku, ak nie je zadaná hodnota `to`.
- Číselné hodnoty `duration`, `delay`, `repeatDelay` a `stagger` v sekundách.
- Hodnoty prvku `repeat` od 0 do 19 a logická hodnota `yoyo`. Pri dlhšom alebo nekonečnom opakovaní použite opakovanie časovej osi.
- `defaults`, `delay`, `repeatDelay`, `repeat` a `yoyo` časovej osi; `repeat--1` časovej osi sa opakuje neobmedzene.
- Číselné pozície na časovej osi, sekvenčné umiestnenie, `<`, `>` a relatívne posuny, napríklad `+=0.2`, `-=0.2` a `<+=0.2`.
- Pomenované funkcie easing v Motion, `linear`/`none` a bežné názvy funkcií easing GSAP: od `power0` po `power4`, `sine`, `expo`, `circ` a `back`, s príponami `.in`, `.out` alebo `.inOut`.
- GSAP aliasy rotácie, napríklad `rotation`, mapované na `rotate` v Motion.

Napríklad animujte potomkov v poradí s prekrytí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>
```

## Obmedzenia špecifické pre engine

Adaptér vyvolá chybu pri nastaveniach dostupných iba v GSAP, medzi ktoré patria ScrollTrigger, pluginy GSAP, `autoAlpha`, percentuálne transformácie, ako je `xPercent`, pomocné funkcie spätného volania, vnorené objekty `attr`/`css` a relatívne hodnoty vlastností, napríklad `x-+=100`. Nepodporujú sa ani percentuálne pozície na časovej osi a rozloženie s odstupmi vo forme objektu. Ak tieto funkcie potrebujete, použite adaptér GSAP.

Podpora pomocných funkcií neznamená, že oba enginy interpolujú úplne rovnako. Prehrávanie animácií aj interpoláciu vlastností zabezpečuje Motion.

## Čistenie

Použite `animations.refresh()` po aktualizáciách DOM alebo zapnite `watch`. Pri odpojení zavolajte `animations.destroy()`. Zruší prehrávanie v Motion, odstráni poslucháče mediálnych dotazov a pozorovateľov a obnoví pôvodné vložené štýly.