# Motion

Adapter Motion uporablja zaporedja animacij DOM v Motion. Namestite javni paket in 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>
```

Za to nastavitev ne potrebujete GSAP. Osnovno razčlenjevanje, privzete vrednosti, izbirniki, prednastavitve, spremljanje in metode življenjskega cikla so skupni obema pogonoma.

Deklaracije DOM za Motion 14.6 se sklicujejo na tip, ki ga zagotavlja `@types/react`. Pri projektih TypeScript s strogim preverjanjem deklaracij odvisnosti namestite te tipe tudi kot razvojno odvisnost. React sam po sebi ni potreben:

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

Vključite `"react"` v `compilerOptions.types`, kadar vaša konfiguracija TypeScript omejuje pakete ambientnih tipov.

## Podprte vrednosti

- Lastnosti DOM v Motion s številskimi ali besedilnimi vrednostmi, vključno z neprosojnostjo, transformacijami in barvami.
- `from`, `to` in seznanjena stanja `from`/`to`. Animacija `from` se konča pri naravnem slogu elementa, če vrednost `to` ni podana.
- Številske vrednosti `duration`, `delay`, `repeatDelay` in `stagger` v sekundah.
- Vrednosti `repeat` elementa od 0 do 19 in logična vrednost `yoyo`. Za daljše ali neskončno ponavljanje uporabite ponovitev časovnice.
- `defaults`, `delay`, `repeatDelay`, `repeat` in `yoyo` časovnice; `repeat--1` časovnice se ponavlja neskončno.
- Številski položaji na časovnici, zaporedna umestitev, `<`, `>` in relativni odmiki, kot so `+=0.2`, `-=0.2` in `<+=0.2`.
- Poimenovano glajenje Motion, `linear`/`none` in običajna imena glajenja GSAP: od `power0` do `power4`, `sine`, `expo`, `circ` in `back` s priponami `.in`, `.out` ali `.inOut`.
- GSAP vzdevki za vrtenje, kot je `rotation`, preslikan v `rotate` v Motion.

Na primer, animirajte otroke zaporedno s prekrivanjem:

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

## Omejitve posameznega pogona

Adapter sproži napako pri nastavitvah, ki so na voljo samo v GSAP, vključno z ScrollTrigger, vtičniki GSAP, `autoAlpha`, odstotkovnimi transformacijami, kot je `xPercent`, povratnimi funkcijami, ugnezdenimi objekti `attr`/`css` in relativnimi vrednostmi lastnosti, kot je `x-+=100`. Odstotkovni položaji na časovnici in zamik v obliki objekta prav tako niso podprti. Če potrebujete te funkcije, uporabite adapter GSAP.

Podprte funkcije ne zagotavljajo enake interpolacije v obeh pogonih. Motion upravlja predvajanje animacij in interpolacijo lastnosti.

## Čiščenje

Po posodobitvah DOM uporabite `animations.refresh()` ali omogočite `watch`. Ob odstranitvi pokličite `animations.destroy()`. Prekliče predvajanje Motion, odstrani poslušalce medijskih poizvedb in opazovalnike ter obnovi izvirne vdelane sloge.