GSAPのscrollTriggerのポイントまとめ

あゆか | AIで月5万円の副業に挑戦中

2026年2月24日 05:06

① はじめに

scrollTriggerってなに？

ここから始まりました。

今まで学習してきた gsap.to や gsap.from とは別に、
scrollTriggerは“単体で書くもの”だと思っていました。

そしてもうひとつ。

「staggerってなに…？」

GSAPはアニメーションを簡単に実装できる便利なライブラリですが、
仕組みを理解できていないと一気に難しく感じてしまいます。

今回一つひとつ確認しながら理解できたので、
自分の備忘録としてまとめておきます。

② 役割分担で考える

理解できたきっかけは
**「役割を分けて考えること」**でした。

■ gsap.from

HTML/CSSで表示されている状態を「現在」とすると、

gsap.from は
過去 → 現在に動きをつけるメソッド。

ここで決めているのは：

どの要素を
どのように動かすか

つまり「動きそのもの」です。

■ scrollTrigger

scrollTriggerは単体で書くものではなく、
gsap.from（またはgsap.to）の中に書く追加機能です。

ここで決めているのは：

いつ動かすか
どの位置でアニメーションを発火させるか

つまり「タイミング」です。

■ stagger

staggerも同じく、
gsap.fromの中に書く追加機能。

複数要素があるときに、

同時に動かすのではなく
時間差で順番に実行する

ための設定です。

つまり「順番」です。

③ 実際のコードで見てみよう

gsap.from(".gsap_item", {
    y: 60,
    autoAlpha: 0,
    duration: 1.5,
    scrollTrigger: {
        trigger: ".gsap_container",
        start: "top center",
        markers: true,
    },
    stagger: {
        from: "start",
        each: 1.2,
    },
});

■ gsap.from の部分

ここでは動きを定義しています。

.gsap_item に対して：

y: 60
→ 下から60px上へ動かす
autoAlpha: 0
→ 透明な状態から表示させる
duration: 1.5
→ 1.5秒かけてアニメーションする

この時点でページを確認すると、
要素すべてが一斉にふわっと表示されます。

■ scrollTrigger を追加すると

scrollTrigger: {
    trigger: ".gsap_container",
    start: "top center",
    markers: true,
},

trigger
→ どの要素を基準にするか
start
→ その要素が画面のどの位置に来たら発火するか
（"top center" は「trigger要素の上端が画面中央に来たとき」）
markers
→ 発火位置を目視確認するための開発用設定
※本番環境では削除します

ここで初めて
「スクロールしたときに動く」アニメーションになります。

■ stagger を追加すると

stagger: {
    from: "start",
    each: 1.2,
},

from
→ どの要素から順番に実行するか
each
→ 何秒間隔で実行するか

これにより、
複数要素が左から順番に時間差で表示されます。

④ まとめ

今回理解できたポイントは、

gsap.from → 動き
scrollTrigger → タイミング
stagger → 順番

という「役割分担」で考えること。

GSAPは難しいのではなく、
役割が混ざると難しく感じるだけでした。

分けて考えると、かなり整理されます。