Intersection ObserverとGSAPの組み合わせで画像をふわっと遅延表示させたいが…

Question

IntersectionObserverを使って、
要素が画面の半分まできたら３つの画像を順番にふわっと表示させたいです。

ICSのサイトや他のIntersectionObserverに関する記事を調べて自分なりに書いてみましたが、上手く動作しません。

よろしくお願いします。

https://codepen.io/kami8ma8810/pen/KKgmQgr

<div class="js-trigger">
  <img class="js-fadeIn" src="https://picsum.photos/seed/1/200/300" alt="">
  <img class="js-fadeIn" src="https://picsum.photos/seed/2/200/300" alt="">
  <img class="js-fadeIn" src="https://picsum.photos/seed/3/200/300" alt="">
</div>

.js-fadeIn {
  opacity: 0;
}

// 監視対象
const targets = document.querySelectorAll(".js-trigger");

// オプション
const options = {
  root: null,
  rootMargin: "-50% 0px",
  threshold: 0
};

// オブジェクト生成
const observer = new IntersectionObserver(doWhenIntersect, options);

// targetを監視
targets.forEach((target) => {
  observer.observer(target);
});

const doWhenIntersect = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      document.querySelectorAll(".js-fadeIn").forEach(function () {
        gsap.fromTo(
          ".js-fadeIn",
          { y: 50 },
          {
            delay: 1,
            duration: 1.5,
            y: 0,
            opacity: 1,
            ease: "power2.out",
            stagger: 0.5
          }
        );
      });
    }
  });
};

Comments

[Lhankor_Mhy]

codepenのコードとご提示のコードが微妙に違うようですが、どちらの話をすればいいですか？

Answer 1

こんにちは。

とりあえず、Codepenはスルーして、ご提示のコードの話をします。

---

まず、observer.observer()はtypoだと思います。
IntersectionObserver.observe() - Web API | MDN

---

次に、宣言前の変数を参照することはできません。

// オブジェクト生成
const observer = new IntersectionObserver(doWhenIntersect, options);
//                                        ^これ
//...

const doWhenIntersect = (entries) => {
//    ^これ

ReferenceError: can't access lexical declaration`X' before initialization - JavaScript | MDN

Comments

[HayatoKamiyama]

ご回答ありがとうございます。

まだ初学者なのでtypoの意味を調べるレベルで申し訳ないです。
一旦宣言の順番を変えてみます！