スキル自身の言葉で
gsap-core は GSAP のコアエンジンへの入門スキルです。gsap.to()、gsap.from()、gsap.fromTo()、gsap.set() による単一のトゥイーン、および duration（デフォルト 0.5）、delay、ease（デフォルト power1.out）、stagger、overwrite、immediateRender といった一般的な vars を扱います。GSAP のトランスフォームエイリアス（x、y、scale、rotation、xPercent）、フェード用の autoAlpha、clearProps、関数ベースおよび相対的な値、プロジェクト全体に適用する gsap.defaults() についても解説しています。
大きなセクションでは、レスポンシブなブレークポイントと prefers-reduced-motion のための gsap.matchMedia() を扱い、公式のベストプラクティス一覧と Do Not セクションで締めくくられています。React、Vue、Svelte、あるいは vanilla JS で GSAP アニメーションを書いたりレビューしたりするデザイナーおよびデベロッパー向けに書かれています。
生成されるもの
- コアエンジン内に同梱されている CSSPlugin によってアニメーションされる DOM 要素で、追加のプラグインは不要です。
- すべてのtweenメソッドから返されるTweenインスタンスで、一時停止・再生・逆再生・停止・スクラブが必要なときに保存しておくものです。
- エイリアスとして記述され、固定の順序（translation、scale、rotationX/Y、skew、rotation）で適用される変形です。
- matchMediaハンドラー内で作成されるアニメーションとScrollTriggerで、クエリが一致しなくなると自動的に元に戻されます。
仕組み
- 01Tweenメソッドを選ぶ
gsap.to()は現在の状態から渡したvarsへアニメーションさせる最も一般的な呼び出しです。from()はエントランス用にそれを逆にし、fromTo()は現在の値を読まずに両端を明示的に指定し、set()はduration 0で即時に適用します。
- 02varsはcamelCaseで書く
varsオブジェクト内のプロパティ名はcamelCaseである必要があります。そのため、background-colorやfont-sizeのようなCSSプロパティはbackgroundColorやfontSizeになります。
- 03staggerでオフセットする
staggerに指定した単純な数値は各ターゲット間の秒数です。オブジェクト形式ではfrom方向を伴うamountや、from: "random"を伴うeachなどのオプションを追加できます。
- 04イーズを選ぶ
文字列イーズはほとんどのケースをカバーします。power1.outがデフォルトの感触で、ドキュメントに記載された他の選択肢としてback.out(1.7)、elastic.out(1, 0.3)、power3.inOut、noneがあります。
- 05ターゲットごとに値を計算する
varsの値として渡された関数は、最初のレンダー時に各ターゲットに対して一度呼び出されます。これにより、x: (i) => i * 50のようなインデックスに基づく値をセット全体に分散させることができます。
- 06作業をメディアクエリに限定する
gsap.matchMedia()はクエリが一致している間だけそのセットアップハンドラーを実行します。これがこのスキルがレスポンシブなブレークポイントとreduced-motionのユーザーを扱う方法です。