# Motion

Adapter Motion menggunakan urutan animasi DOM Motion. Instal paket publik dan 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>
```

Anda tidak memerlukan GSAP untuk penyiapan ini. Penguraian inti, nilai default, selector, preset, pemantauan, dan metode siklus hidup digunakan bersama oleh kedua engine.

Deklarasi DOM Motion 14.6 merujuk pada tipe yang disediakan oleh `@types/react`. Untuk proyek TypeScript yang ketat dan memeriksa deklarasi dependensi, instal juga tipe tersebut sebagai dependensi pengembangan. React itu sendiri tidak diperlukan:

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

Sertakan `"react"` di `compilerOptions.types` jika konfigurasi TypeScript Anda membatasi paket tipe ambient.

## Nilai yang didukung

- Properti DOM Motion dengan nilai numerik atau string, termasuk opasitas, transformasi, dan warna.
- `from`, `to`, dan status berpasangan `from`/`to`. Animasi `from` berakhir pada gaya alami elemen jika nilai `to` tidak diberikan.
- Nilai numerik `duration`, `delay`, `repeatDelay`, dan `stagger` dalam detik.
- Nilai elemen `repeat` dari 0 hingga 19 dan `yoyo` boolean. Gunakan pengulangan timeline untuk repetisi yang lebih panjang atau tanpa batas.
- `defaults`, `delay`, `repeatDelay`, `repeat`, dan `yoyo` timeline; `repeat--1` timeline diulang tanpa batas.
- Posisi timeline numerik, penempatan berurutan, `<`, `>`, dan offset relatif seperti `+=0.2`, `-=0.2`, dan `<+=0.2`.
- Nama easing Motion, `linear`/`none`, dan nama easing GSAP umum: `power0` hingga `power4`, `sine`, `expo`, `circ`, dan `back`, dengan sufiks `.in`, `.out`, atau `.inOut`.
- GSAP alias rotasi, seperti `rotation`, yang dipetakan ke `rotate` Motion.

Contohnya, animasikan elemen turunan secara berurutan dengan tumpang tindih:

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

## Batas khusus engine

Adapter akan menampilkan kesalahan untuk pengaturan khusus GSAP, termasuk ScrollTrigger, plugin GSAP, `autoAlpha`, transformasi persentase seperti `xPercent`, utilitas callback, objek `attr`/`css` bertingkat, dan nilai properti relatif seperti `x-+=100`. Posisi timeline berbasis persentase dan stagger berbentuk objek juga tidak didukung. Gunakan adapter GSAP jika fitur tersebut diperlukan.

Utilitas yang didukung tidak berarti interpolasi kedua engine identik. Motion mengelola pemutaran animasi dan interpolasi propertinya sendiri.

## Pembersihan

Gunakan `animations.refresh()` setelah pembaruan DOM, atau aktifkan `watch`. Panggil `animations.destroy()` saat pembongkaran. Ini membatalkan pemutaran Motion, menghapus listener kueri media dan observer, serta memulihkan gaya inline asli.