# 動き

Motionアダプターは、MotionのDOMアニメーションシーケンスを使用します。公開パッケージと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>
```

このセットアップにGSAPは必要ありません。コアの解析、デフォルト値、セレクター、プリセット、監視機能、ライフサイクルメソッドは、どちらのエンジンでも共通です。

Motion 14.6のDOM型宣言は、`@types/react`が提供する型を参照します。依存関係の宣言も検査する厳格なTypeScriptプロジェクトでは、その型も開発用依存関係としてインストールしてください。React自体は必要ありません。

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

TypeScriptの設定でグローバルな型パッケージが制限されている場合は、`"react"`を`compilerOptions.types`に含めてください。

## サポートする値

- 数値または文字列の値を持つMotionのDOMプロパティ。opacity、transform、色など。
- `from`、`to`、および対になる`from`/`to`の状態。`to`の値が指定されていない場合、`from`アニメーションは要素本来のスタイルで終了します。
- 秒単位の数値`duration`、`delay`、`repeatDelay`、`stagger`の値。
- 0〜19の要素`repeat`の値と、真偽値の`yoyo`。長時間または無限の繰り返しには、タイムラインのrepeatを使用してください。
- タイムラインの`defaults`、`delay`、`repeatDelay`、`repeat`、`yoyo`。タイムラインの`repeat--1`は無限に繰り返します。
- 数値によるタイムライン位置、順次配置、`<`、`>`、および`+=0.2`、`-=0.2`、`<+=0.2`のような相対オフセット。
- Motionの名前付きイージング、`linear`/`none`、および一般的なGSAPイージング名：`power0`〜`power4`、`sine`、`expo`、`circ`、`back`。接尾辞には`.in`、`.out`、`.inOut`があります。
- GSAPの回転エイリアス。たとえば`rotation`はMotionの`rotate`に対応します。

たとえば、重なりを設けて子要素を順番にアニメーションさせます。

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

## エンジン固有の制限

このアダプターは、GSAP専用の設定があるとエラーをスローします。これにはScrollTrigger、GSAPプラグイン、`autoAlpha`、`xPercent`のようなパーセント指定のtransform、コールバックユーティリティ、ネストした`attr`/`css`オブジェクト、`x-+=100`のような相対プロパティ値が含まれます。パーセントベースのタイムライン位置とオブジェクト形式のstaggerもサポートされません。これらの機能が必要な場合は、GSAPアダプターを使用してください。

ユーティリティがサポートされていても、2つのエンジンで補間の動作が同じとは限りません。Motionがアニメーションの再生とプロパティの補間を担います。

## クリーンアップ

DOMの更新後に`animations.refresh()`を使用するか、`watch`を有効にしてください。破棄時には`animations.destroy()`を呼び出してください。Motionの再生をキャンセルし、メディアクエリのリスナーとオブザーバーを削除して、元のインラインスタイルを復元します。