ポッと大きくなる画像

スクロールして指定の位置に来たら、ポッと画像が大きくなって表示される、かわいいアニメーションをつけます。

1. クラス「pop-img」を画像ウィジットにつける

2. 以下のJSを入れる

（このコードの上にGSAP読み込みコードを入れてください。）

HTML

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

  // --- pop img ---
  const popImages = document.querySelectorAll('.pop-img img'); 

  popImages.forEach(img => {
    gsap.fromTo(img, 
      {
        opacity: 0,
        scale: 0.2
      },
      {
        opacity: 1,
        scale: 1, 
        duration: 0.5, 
        ease: "back.out(1.5)",
        scrollTrigger: {
          trigger: img,
          start: "top 78%",
        }
      }
    );
  });
	
});
</script>


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

  // --- pop img ---
  const popImages = document.querySelectorAll('.pop-img img'); 

  popImages.forEach(img => {
    gsap.fromTo(img, 
      {
        opacity: 0,
        scale: 0.2
      },
      {
        opacity: 1,
        scale: 1, 
        duration: 0.5, 
        ease: "back.out(1.5)",
        scrollTrigger: {
          trigger: img,
          start: "top 78%",
        }
      }
    );
  });
	
});
</script>