発動位置を指定できるフェードイン

elementor でつけるモーション効果やインタラクションのフェードインって若干早いなーと思うことありませんか？

以下のコードではフェードインを発動する位置をこっちで指示できるので、変に遅延時間とか指定しなくてもいいのです。

1. クラス「fade-item」をウィジットにつける

2. 以下のJSを入れる

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

HTML

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

	  // --- fade in ---
  const fadeItems = document.querySelectorAll('.fade-item'); 

  fadeItems.forEach(fadeItems => {
    gsap.fromTo(fadeItems, 
      {
        opacity: 0
      },
      {
        opacity: 1,
        duration: 0.8, 
        ease: "power1.out",
        scrollTrigger: {
          trigger: fadeItems,
          start: "top 80%", /* ここを調整（画面上辺から80%の位置で発動） */
        }
      }
    );
  });

});
</script>

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

	  // --- fade in ---
  const fadeItems = document.querySelectorAll('.fade-item'); 

  fadeItems.forEach(fadeItems => {
    gsap.fromTo(fadeItems, 
      {
        opacity: 0
      },
      {
        opacity: 1,
        duration: 0.8, 
        ease: "power1.out",
        scrollTrigger: {
          trigger: fadeItems,
          start: "top 80%", /* ここを調整（画面上辺から80%の位置で発動） */
        }
      }
    );
  });

});
</script>