# Motion

Motion adapteris naudoja Motion DOM animacijų sekas. Įdiekite viešąjį paketą ir 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>
```

Šiai sąrankai GSAP nereikia. Abiem varikliams bendri pagrindiniai analizavimo, numatytųjų reikšmių, parinkiklių, išankstinių nustatymų, stebėjimo ir gyvavimo ciklo metodai.

Motion 14.6 DOM deklaracijose naudojamas tipas, kurį teikia `@types/react`. Jei TypeScript projektuose tikrinamos priklausomybių deklaracijos, šiuos tipus taip pat įdiekite kaip kūrimo priklausomybę. Pačios React nereikia:

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

Įtraukite `"react"` į `compilerOptions.types`, kai TypeScript konfigūracija apriboja numanomuosius tipų paketus.

## Palaikomos reikšmės

- Motion DOM ypatybės su skaitinėmis arba tekstinėmis reikšmėmis, įskaitant nepermatomumą, transformacijas ir spalvas.
- `from`, `to` ir suporuotos `from`/`to` būsenos. Jei nepateikta `to` reikšmė, `from` animacija baigiasi natūraliu elemento stiliumi.
- Skaitinės `duration`, `delay`, `repeatDelay` ir `stagger` reikšmės sekundėmis.
- Elemento `repeat` reikšmės nuo 0 iki 19 ir loginė `yoyo` reikšmė. Ilgesniam arba begaliniam kartojimui naudokite laiko juostos kartojimą.
- Laiko juostos `defaults`, `delay`, `repeatDelay`, `repeat` ir `yoyo`; laiko juostos `repeat--1` kartojasi neribotai.
- Skaitinės laiko juostos pozicijos, nuoseklus išdėstymas, `<`, `>` ir santykiniai poslinkiai, pavyzdžiui, `+=0.2`, `-=0.2` ir `<+=0.2`.
- Motion pavadinti švelninimo variantai, `linear`/`none` ir įprasti GSAP švelninimo pavadinimai: nuo `power0` iki `power4`, `sine`, `expo`, `circ` ir `back` su priesagomis `.in`, `.out` arba `.inOut`.
- GSAP sukimosi sinonimai, pavyzdžiui, `rotation`, susieti su Motion `rotate`.

Pavyzdžiui, animuokite vaikus paeiliui, persidengiant animacijoms:

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

## Varikliui būdingi apribojimai

Adapteris pateikia klaidą naudojant tik GSAP skirtus nustatymus, įskaitant ScrollTrigger, GSAP papildinius, `autoAlpha`, procentines transformacijas, pvz., `xPercent`, atgalinio iškvietimo priemones, įdėtus `attr`/`css` objektus ir santykines ypatybių reikšmes, pvz., `x-+=100`. Nepalaikomos ir procentais pagrįstos laiko juostos pozicijos bei objekto formos pakopinis išdėstymas. Jei reikia šių funkcijų, naudokite GSAP adapterį.

Palaikomos priemonės nereiškia, kad abiejuose varikliuose interpoliavimas veikia vienodai. Motion valdo savo animacijų atkūrimą ir ypatybių interpoliavimą.

## Valymas

Naudokite `animations.refresh()` po DOM atnaujinimų arba įjunkite `watch`. Išardydami iškvieskite `animations.destroy()`. Jis atšaukia Motion atkūrimą, pašalina medijos užklausų klausytojus ir stebėtojus bei atkuria pradinius įterptinius stilius.