スキル自身の言葉で
Vue、Nuxt、Svelte、SvelteKit のコンポーネントをアニメーションさせるための公式 GSAP ガイダンスで、フレームワークのライフサイクルが DOM ノードの存在するタイミングを決定します。エージェントに対して、マウント後（Vue では onMounted、Svelte では onMount）にのみ、コンテナ ref を第2引数として渡した gsap.context(scope) の中で tween と ScrollTrigger を作成するよう指示しており、.box のようなセレクタがそのコンポーネント内に留まるようにします。
アンマウント時には ctx.revert() がアニメーションと ScrollTrigger を停止し、インラインスタイルを元に戻します。また、ScrollTrigger を一度だけ登録し、SplitText などのプラグインを動的インポートで遅延読み込みする Nuxt 4 の useGSAP コンポーザブルについても取り上げ、レイアウト変更後にトリガー位置を更新する方法も解説します。
生成されるもの
- コンテキストとクリーンアップのパターンを示す、実行可能な Vite + Vue 3 のサンプルプロジェクトです。
- コンポーネント内で useGSAP() を通じて利用される Nuxt コンポーザブルで、gsap インスタンスと遅延読み込みメソッドを公開します。
- プラグインを動的インポートし、gsap に登録して返す、型付きの lazyLoadPlugin ヘルパーです。
仕組み
- 01作成前に DOM を待つ
tween と ScrollTrigger は、Vue では onMounted、Svelte では onMount を使って、コンテナ ref が実際に存在するようになった、コンポーネントの DOM が利用可能になった時点でのみ作成されます。
- 02すべてをコンポーネントのルートにスコープする
アニメーション設定全体は gsap.context(callback, scope) でラップされ、コンテナ ref が第2引数として渡されることで、.item のようなセレクタがそのサブツリー内でのみ解決されるようにします。
- 03フレームワークのティアダウンで revert する
各サンプルはコンテキストを変数に保持し、Vue では onUnmounted から、Svelte では onMount が返すクリーンアップ関数から ctx.revert() を呼び出します。
- 04レイアウト変更後にリフレッシュする
ScrollTrigger の位置は、レイアウトが確定した後、例えばデータ読み込みによってトリガー位置が変わった後に再計算されます。