要素を一つづつフェードインさせる

スクロールして、指定の位置に来たら要素が一つづつフェードインして表示されるようなアニメーションをつけます。

1. 要素を囲うコンテナに「stagger-wrapper」とクラスをつける
2. 要素それぞれに「stagger-item」とクラスをつける

2. 以下のJSを入れる
（このコードの上にGSAP読み込みコードを入れてください。）

HTML

<script>
document.addEventListener('DOMContentLoaded', () => {
  gsap.registerPlugin(ScrollTrigger);


// --- stagger animation ---
  let mm = gsap.matchMedia();

  mm.add("(min-width: 769px)", () => {
    const staggerWrappers = document.querySelectorAll('.stagger-wrapper');

    staggerWrappers.forEach(wrapper => {
      const staggerItems = wrapper.querySelectorAll('.stagger-item');

      gsap.fromTo(staggerItems,
        {
          autoAlpha: 0,
        },
        {
          autoAlpha: 1,
          duration: 1,
          ease: "power2.out",
          stagger: 0.3,
          scrollTrigger: {
            trigger: wrapper,
            start: "top 80%",
            toggleActions: "play none none reverse"
          }
        }
      );
    });
  });

  mm.add("(max-width: 768px)", () => {
    const staggerItems = document.querySelectorAll('.stagger-item');

    staggerItems.forEach(item => {
      gsap.fromTo(item,
        {
          autoAlpha: 0,
        },
        {
          autoAlpha: 1,
          y: 0,
          duration: 0.8,
          ease: "power2.out",
          scrollTrigger: {
            trigger: item,
            start: "top 80%",
            toggleActions: "play none none reverse"
          }
        }
      );
    });
  });
  
  
});
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
  gsap.registerPlugin(ScrollTrigger);


// --- stagger animation ---
  let mm = gsap.matchMedia();

  mm.add("(min-width: 769px)", () => {
    const staggerWrappers = document.querySelectorAll('.stagger-wrapper');

    staggerWrappers.forEach(wrapper => {
      const staggerItems = wrapper.querySelectorAll('.stagger-item');

      gsap.fromTo(staggerItems,
        {
          autoAlpha: 0,
        },
        {
          autoAlpha: 1,
          duration: 1,
          ease: "power2.out",
          stagger: 0.3,
          scrollTrigger: {
            trigger: wrapper,
            start: "top 80%",
            toggleActions: "play none none reverse"
          }
        }
      );
    });
  });

  mm.add("(max-width: 768px)", () => {
    const staggerItems = document.querySelectorAll('.stagger-item');

    staggerItems.forEach(item => {
      gsap.fromTo(item,
        {
          autoAlpha: 0,
        },
        {
          autoAlpha: 1,
          y: 0,
          duration: 0.8,
          ease: "power2.out",
          scrollTrigger: {
            trigger: item,
            start: "top 80%",
            toggleActions: "play none none reverse"
          }
        }
      );
    });
  });
  
  
});
</script>