GreenSock

GSAPの拡張機能を使い、文字の登場、SVGの描画や変形、ドラッグ操作、レイアウト変更時の動きを実装・レビューし、登録方法や設定も確認するスキル。

• 見出しを一字ずつ動かしたいとき
• SVGの描画や変形を付けたいとき
• 慣性付きのドラッグ操作の実装

GSAPのアニメーションで使う数値変換や配列操作を支援するスキル。スクロール量の変換、値の制限、ランダム化、等間隔への丸めなどを実装・確認できます。

• スクロール量を移動や回転に変換したいとき
• アニメーションの位置を格子に合わせたいとき
• 要素の位置や色をランダムにしたいとき

VueやSvelteなどにGSAPのアニメーションを組み込む際、開始のタイミング、対象要素の範囲指定、コンポーネント破棄時の後始末を支援するスキル。

• Vueの部品に動きを付けたいとき
• Svelteの終了処理を見直したいとき
• アニメーションの対象範囲の限定

GSAPで複数のアニメーションの順序や重なりを組み立てるスキル。開始時刻や区切りの名前を指定し、入れ子の構成と再生・停止・逆再生まで扱います。

• 複数の要素を順番に動かしたいとき
• 動きの重なりを細かく調整
• ラベルで演出の区切りを整理

GSAPのアニメーションのカクつきを減らすために、動かすプロパティや画面更新の順序、多数の要素・マウス追従処理の実装を見直すスキル。

• GSAPのカクつきを見直したいとき
• 長いリストのアニメーション負荷軽減
• マウス追従処理の最適化

Webページのスクロールに合わせて、要素の移動や表示、区間内での固定を実装します。GSAPのScrollTriggerを使い、視差効果や横方向の演出も扱います。

• 画面に入ったカードを表示したいとき
• スクロール中にセクションを固定
• スクロール量とアニメーションを連動

ReactやNext.jsにGSAPのアニメーションを組み込み、対象要素の指定から、値の変化に応じた更新、コンポーネントを外す際の後片付けまで支援します。

• Reactに動きを付けたいとき
• 動かす要素の範囲を限定したいとき
• 画面切り替え時の処理を整理したいとき

Webの要素やSVGにGSAPで動きを付けるコードの作成・レビューを支援するスキル。速度の変化や順次表示、画面幅や動きを減らす設定に応じた調整を扱います。

• Web要素に登場演出を付けたいとき
• 複数要素を時間差で動かしたいとき
• 画面幅に応じて動きを変えたいとき