【JavaScript】GSAPを複数要素に一括適用する関数の書き方

タグ :

CSS

GSAP

HTML

JAVASCRIPT

PROGRAMMING

gsap.utils.toArray() + forEach() + gsap.to() の組み合わせは、
複数の要素に同じアニメーションを適用する基本形としてよく使われます。

1 GSAPを複数要素に一括適用するテンプレート
2 このパターンを覚えれば全て応用が効く
3 サンプル1
4 サンプル２
5 サンプル３

GSAPを複数要素に一括適用するテンプレート



function applySampleAnimation(elements) {
    gsap.utils.toArray(elements).forEach(el => {
        gsap.to(el, {
            opacity: 1,
        });
    });
}

applySampleAnimation(".sample");

1. gsap.utils.toArray(elements)

→ .sample というセレクタに一致する全要素を配列化。

2. .forEach(el => {…})

→ 各要素ごとに個別にアニメーションを適用。

3. gsap.to(el, {…})

→ 各要素に opacity: 1 のアニメーションを実行。

このパターンを覚えれば全て応用が効く



gsap.registerPlugin(ScrollTrigger); 

function animateItems(selector) {
  gsap.utils.toArray(selector).forEach(el => {
    gsap.from(el, {
      opacity: 0,
      y: 50,
      duration: 1,
      scrollTrigger: {
        trigger: el,
        start: "top 80%",
        toggleActions: "play none none none"
      }
    });
  });
}

animateItems(".fade-in");

• フェード
• スライド
• スクロール連動
• スケール
• 複数要素への適用

など全部対応できます！

必要な効果（ブラー、ズーム、回転など）に応じて .to() や .from() の中身だけ変えればOKです。
もっと高度な応用（タイムラインや連動）をしたいときにもこの基礎が効いてきます。

gsap.registerPlugin(ScrollTrigger); は必須

ScrollTrigger は GSAP 本体とは別のプラグインです。
そのため、使う前に明示的に登録（＝読み込み）する必要があります。
gsap.registerPlugin(ScrollTrigger); は1回だけ宣言すればOK!!

HTMLにCDNの読み込みも必ず必要です！！！！



<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>