# Motion

Adapter Motion korzysta z sekwencji animacji DOM Motion. Zainstaluj publiczny pakiet i 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>
```

W tej konfiguracji nie potrzebujesz GSAP. Analizowanie kodu, wartości domyślne, selektory, presety, obserwowanie i metody cyklu życia są wspólne dla obu silników.

Deklaracje DOM w Motion 14.6 odwołują się do typu dostarczanego przez `@types/react`. W projektach TypeScript z rygorystycznymi ustawieniami, które sprawdzają deklaracje zależności, zainstaluj też typy jako zależność deweloperską. Samo React nie jest potrzebne:

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

Uwzględnij `"react"` w `compilerOptions.types`, jeśli konfiguracja TypeScript ogranicza pakiety typów dostępne globalnie.

## Obsługiwane wartości

- Właściwości DOM Motion z wartościami liczbowymi lub tekstowymi, w tym krycie, transformacje i kolory.
- `from`, `to` oraz sparowane stany `from`/`to`. Animacja `from` kończy się naturalnym stylem elementu, jeśli nie podano wartości `to`.
- Liczbowe wartości `duration`, `delay`, `repeatDelay` i `stagger` w sekundach.
- Wartości `repeat` elementu od 0 do 19 oraz wartość logiczna `yoyo`. Do dłuższych lub nieskończonych powtórzeń użyj powtarzania osi czasu.
- `defaults`, `delay`, `repeatDelay`, `repeat` i `yoyo` osi czasu; powtórzenia `repeat--1` osi czasu są nieskończone.
- Liczbowe pozycje osi czasu, sekwencyjne umieszczanie, `<`, `>` oraz przesunięcia względne, takie jak `+=0.2`, `-=0.2` i `<+=0.2`.
- Nazwane funkcje łagodzenia Motion, `linear`/`none` oraz popularne nazwy funkcji łagodzenia GSAP: od `power0` do `power4`, `sine`, `expo`, `circ` i `back`, z przyrostkami `.in`, `.out` lub `.inOut`.
- Aliasy obrotu GSAP, takie jak `rotation`, mapowane na `rotate` Motion.

Na przykład animuj elementy potomne kolejno, z nakładaniem się animacji:

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

## Ograniczenia specyficzne dla silnika

Adapter zgłasza błąd w przypadku ustawień dostępnych wyłącznie w GSAP, w tym ScrollTrigger, wtyczek GSAP, `autoAlpha`, transformacji procentowych, takich jak `xPercent`, funkcji zwrotnych narzędzi, zagnieżdżonych obiektów `attr`/`css` oraz względnych wartości właściwości, takich jak `x-+=100`. Nieobsługiwane są również procentowe pozycje osi czasu i przesunięcie w formie obiektu. Jeśli potrzebujesz tych funkcji, użyj adaptera GSAP.

Obsługiwane narzędzia nie gwarantują identycznej interpolacji w obu silnikach. Motion zarządza odtwarzaniem animacji i interpolacją właściwości.

## Czyszczenie

Użyj `animations.refresh()` po aktualizacjach DOM lub włącz `watch`. Podczas demontażu wywołaj `animations.destroy()`. Anuluje odtwarzanie Motion, usuwa nasłuchiwacze zapytań o media i obserwatory oraz przywraca pierwotne style wbudowane.