# Motion

A Motion adapter a Motion DOM-animációs sorozatait használja. Telepítse a nyilvános csomagot és a Motiont:

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

Ehhez a beállításhoz nincs szüksége a GSAP csomagra. Az alapvető elemzés, az alapértelmezések, a szelektorok, az előbeállítások, a figyelés és az életciklus-metódusok mindkét motorban közösek.

A Motion 14.6 DOM-deklarációi a `@types/react` által biztosított típust használják. Szigorú TypeScript projektekben, amelyek ellenőrzik a függőségek deklarációit, telepítse a típusokat fejlesztési függőségként is. Magára a React csomagra nincs szükség:

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

Adja hozzá a `"react"` csomagot az `compilerOptions.types` fájlhoz, ha az TypeScript konfigurációja korlátozza a környezetből elérhető típuscsomagokat.

## Támogatott értékek

- Motion DOM-tulajdonságok numerikus vagy szöveges értékekkel, például átlátszóság, transzformációk és színek.
- `from`, `to`, valamint párosított `from`/`to` állapotok. A `from` animáció az elem természetes stílusával ér véget, ha nincs megadva `to` érték.
- Numerikus `duration`, `delay`, `repeatDelay` és `stagger` értékek másodpercben.
- Az elem `repeat` értékei 0 és 19 között, valamint logikai `yoyo`. Hosszabb vagy végtelen ismétléshez használja az idővonal ismétlési beállítását.
- Idővonal-`defaults`, `delay`, `repeatDelay`, `repeat` és `yoyo`; az idővonal `repeat--1` beállítása végtelenül ismétel.
- Numerikus idővonalpozíciók, egymást követő elhelyezés, `<`, `>` és relatív eltolások, például `+=0.2`, `-=0.2` és `<+=0.2`.
- A Motion névvel ellátott easingjei, `linear`/`none`, valamint az elterjedt GSAP easingnevek: `power0`-től `power4`-ig, továbbá `sine`, `expo`, `circ` és `back`, `.in`, `.out` vagy `.inOut` utótaggal.
- GSAP forgatási álnevek, például a `rotation`, amely a Motion `rotate` értékére van leképezve.

Például a gyermekelemek animálása egymás után, átfedéssel:

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

## Motorspecifikus korlátozások

Az adapter hibát jelez a kizárólag a GSAP motorra érvényes beállításoknál, beleértve a ScrollTrigger beállítást, a GSAP bővítményeket, a `autoAlpha` értéket, a százalékos transzformációkat, például a `xPercent` értéket, a visszahívási segédfüggvényeket, a beágyazott `attr`/`css` objektumokat és a relatív tulajdonságértékeket, például a `x-+=100` értéket. A százalékalapú idővonalpozíciók és az objektumformájú lépcsőzetes beállítások szintén nem támogatottak. Ha ezekre a funkciókra van szükség, használja a GSAP adaptert.

A támogatott segédfüggvények nem jelentik azt, hogy a két motor ugyanúgy interpolál. Az animáció lejátszását és a tulajdonságok interpolációját a Motion kezeli.

## Tisztítás

DOM-frissítések után használja a `animations.refresh()` metódust, vagy engedélyezze a `watch` beállítást. A bontáskor hívja meg a `animations.destroy()` metódust. Ez megszakítja a Motion lejátszását, eltávolítja a médiakérdés-figyelőket és a megfigyelőket, majd visszaállítja az eredeti inline stílusokat.