動き

Markdownとして表示 ChatGPTで開く Claudeで開く GitHubで編集ドキュメント: cb527c5

Motionアダプターは、MotionのDOMアニメーションシーケンスを使用します。公開パッケージとMotionをインストールしてください。

シェル

pnpm add glazejs motion

TypeScript

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自体は必要ありません。

シェル

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の再生をキャンセルし、メディアクエリのリスナーとオブザーバーを削除して、元のインラインスタイルを復元します。