GSAPのベーシックチートシート！基礎とよくある質問を徹底解説！

GSAPの基本の使い方

GSAPのインストール方法

gsapを使うには、yarnやnpmでinstallするか、CDNで引っ張ってくる必要があります。

それぞれのインストール方法は以下のページの「Install Helper」を確認してください。

参考

Installation | GSAP | Docs & Learning

あとは、JSファイルでimport { gsap } from 'gsap';するだけです。

まずgsap.to()ってどういう意味?

gsap.to()はGSAPのTween（トゥイーン）の一つであり、「現在の状態からアニメーションする」ことを表しています。

Tweenとは、betweenから来た用語でアニメーションをどの状態からどのように開始させるかを設定します。

• gsap.to()：現在の状態からアニメーション
• gsap.from()：現在の状態に戻るアニメーション
• gsap.fromTo()：指定した初期状態から指定した完了状態にアニメーション
• gsap.set()：初期状態を指定

複数の要素に一括でgsap.set()するには？

複数の要素に同じgsap.set()を適用したい場合、配列で指定することで実現できます。

gsap.set(['.apple', '.orange', '.banana'], { opacity: 0
});

Timelineをマスターする

※後日追加予定

ScrollTriggerを使ってみよう！

ScrollTriggerのインストール方法

ScrollTriggerはGSAPの主要なプラグインで、名前の通りスクロール量をトリガーにいろんなことができます。Intersection Observerの超便利版みたいな感じです。

プラグインなので、GSAP本体とは別にScrollTriggerをインストールする必要があります。

以下のページの「Install Helper」で、ScrollTriggerにチェックを入れるとインストール方法を確認できます。

importした後にgsap.registerPlugin(ScrollTrigger);するのを忘れないようにしましょう。

参考

Installation | GSAP | Docs & Learning

ScrollTriggerが動かない!? あるある原因

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
const _init = () => { //scrolltrigger gsap.registerPlugin(ScrollTrigger); gsap.to('.target',{ x:400, ScrollTrigger:{ trigger:'.target', start:'top top', end:'bottom top', scrub:1, pin:true, markers:true } });
}
onReady(_init)

このコードを見てください。

一見何の問題もないようなこのコード。しかしこのコードではスクロールトリガーが動きません。

なぜだかわかりますか？

インポート順は間違えてないし、registerPluginでScrollTriggerを登録しているし・・・

はい。原因は、ScrollTriggerのSを大文字で書いてしまっているからです。gsap.to()の中のScrollTriggerを見てください。最初のSが大文字になってしまっていますね。これが原因で動いていなかったのです。小文字にしてscrollTriggerと書きましょう。

pinすると余計なpaddingができてしまう！余白を取る方法

結論：pinSpacingもしくはtoggleClass

pinをすると、デフォルトでは、ピン留め要素にpaddingが追加されます。ピン留めが解除されたときに後に続く要素が追いつくように、paddingで下の要素とのスペースを確保しているのです。

ただし、要件によってはこの余白が邪魔な場合があります。この余白をトルためには、pinSpacing:falseを設定します。これにより、ScrollTriggerにpaddingを追加しないようにすることができます。pinSpacing: "margin"と書くことで、paddingの代わりにmarginを使用することもできます。

pinの代わりにtoggleClassでpinを実現する

もっと良い解決方法は、そもそもScrollTriggerのpinを使わないことです。pinは結局のところstartからendまでposition:fixed;しているだけですので、自前で.pinなどのclassを作り、それをScrollTriggerのtoggleClassでつけ外しする方がシンプルで分かりやすいです。

pinは便利ですが、JSで動的にインラインスタイルを付与するため既存のスタイルとの噛み合わせが悪く、意図せぬ挙動をすることがあります。toggleClassを使うことでインラインスタイルを使わずに済むので、スタイルの管理がしやすくなります。

 gsap.to('.target',{ ScrollTrigger:{ trigger:'.trigger', start:'top top', end:'bottom top', toggleClass:'fadeIn', markers:true } });

gsap.matchMedia()でメディアクエリを指定してレスポンシブ対応が可能！

gsapのmatchMediaを指定すると、メディアクエリごとにgsapアニメーションを設定できます。PCとSPで異なるアニメーションを使用したい時やPCだけにアニメーションを使用したい場合に便利です。

 let mm = gsap.matchMedia(); mm.add('(min-width:960px)',() => {})

gsap.matchMedia()が効かない!?

gsap.matchMedia()が効かない場合は、gsapのバージョンが古い場合があります。

matchMediaは「3.11.0」以降に追加された機能のため、gsapのバージョンがこれより古いと機能しません。

バージョンを指定して、再度yarn add gsapしてあげましょう。

 "dependencies": { "gsap": "^3.12.5", },

 yarn add gsap