jQueryが作動しない：特定のsectionに到達した時点でアニメーションを作動させたい。

前提・実現したいこと

セクション毎で画像やテキストのアニメーションを作動させたい。

ユーザーが各セクションの可視範囲までスクロールした場合に、
テキストや画像のアニメーションを作動させたいです。

現状だと、ページそのものを叩いた状態で、すぐ作動してしまいます。

fullpage.jsを利用しているので、そのせいでうまく作動していないのかもしれません....。

以下サイトのようなイメージです。
https://firstlayout.net/css-animation-of-images/

発生している問題・エラーメッセージ

サイトを表示した際にすぐ、アニメーションが作動してしまう。

該当のソースコード

HTML
1  <body>
2    <div class="wrapper">
3    <div class="fullPageScroll">
4~(中略）
5      <section id="section1" class="section section1">
6        <h1>Company Profile</h1>
7        <div class="img-wrap">
8          <img src="/Users/~/image.jpg">
9        </div>
10　　　　</section>
11~(中略）
12    </div>
13    </div>
14  </body>

CSS
1  .section3 {
2    background-color: white;
3    position: relative;
4  }
5
6  .section3 h1 {
7    position: absolute;
8    left: 16%;
9    top: 7%;
10    text-align: center;
11    font-size: 3em;
12    font-family: 'Raleway', sans-serif;
13  }
14
15  .section1 img {
16    display: block;
17    width: 40%;
18    height: 100vh;
19    float: right;
20  }
21
22  .img-wrap {
23    overflow: hidden;
24    position: relative;
25  }
26
27  .img-wrap:before {
28    animation: img-wrap 2s cubic-bezier(.4, 0, .2, 1) forwards;
29    background: #fff;
30    bottom: 0;
31    content: '';
32    left: 0;
33    pointer-events: none;
34    position: absolute;
35    right: 0;
36    top: 0;
37    z-index: 1;
38  }
39
40  @keyframes img-wrap {
41    100% {
42      transform: translateX(-100%);
43    }
44  }
45

※当方ビギナーな為、念の為JSのコード全記載いたします。

JS
1
2  // スムーススクロール
3  const paginations = document.querySelectorAll(".pagination a");
4  paginations.forEach(pagination => {
5    pagination.addEventListener("click", e => {
6      e.preventDefault();
7      const targetId = e.target.hash;
8      const target = document.querySelector(targetId);
9      target.scrollIntoView({ behavior: "smooth" });
10    });
11  });
12
13  // Intersection Observer
14  const sections = document.querySelectorAll(".section");
15  const observerRoot = document.querySelector(".fullPageScroll");
16  const options = {
17    root: observerRoot,
18    rootMargin: "-50% 0px",
19    threshold: 0
20  };
21
22
23  /**
24   * 交差したときに呼び出す関数
25   * @param entries - IntersectionObserverEntry IntersectionObserverが交差したときに渡されるオブジェクトです。
26   */
27  function doWhenIntersect(entries) {
28    entries.forEach(entry => {
29      if (entry.isIntersecting) {
30        activatePagination(entry.target);
31      }
32    });
33  };
34
35  /**
36   * ページネーションの大きさを変える関数
37   * @param element - HTMLElement 現在表示中のスライドのHTML要素を引数に取ります。
38   */
39  function activatePagination(element) {
40    const currentActiveIndex = document.querySelector(
41      "#pagination .active"
42    );
43    if (currentActiveIndex !== null) {
44      currentActiveIndex.classList.remove("active");
45    }
46    const newActiveIndex = document.querySelector(
47      `a[href='#${element.id}']`
48    );
49    newActiveIndex.classList.add("active");
50  };
51
52
53  $(window).scroll(function() {
54    var windowHeight = $(window).height(100);
55    topWindow = $(window).scrollTop(),
56    targetPosition = $("section3").offset().top;
57    const image = document.querySelectorAll('.img-wrap');
58
59    const observer = new IntersectionObserver(function(entries) {
60      entries.forEach(function(entry) {
61        if (entry.intersectionRatio > 0) {
62          entry.target.classList.add('img-animation');
63        } else {
64          entry.target.classList.remove('img-animation');
65        }
66      });
67    });
68
69
70    Array.prototype.forEach.call(image, function(img) {
71      observer.observe(img);
72    });
73  });
74

試したこと

各サイトを調べ、試行錯誤したが解決せず。
http://weboook.blog22.fc2.com/blog-entry-415.html
https://sole-color-blog.com/blog/1237/

$(window).on('load', function() {
  var observer = new IntersectionObserver(function(entries, observer) {
    if (entries[0].intersectionRatio > 0) {
      observer.unobserve(entries[0].target);
      $(entries[0].target).addClass('active');
    }
  });

  $('.scroll-animation').each(function(index, element) {
    observer.observe(element);
  });
});

https://teratail.com/questions/209344
上記の質問で似たような事象があったので、試したのですが、うまく行かず...

ポップアップが表示され
読み込みをしていることは確認

補足情報（FW/ツールのバージョンなど）

js/jquery-3.5.0.min.js
fullPage 3.0.8

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。
サンプルを作りました。JavaScript と CSS を少し変更しています。
（削除したものが別の部分のコードで必要であるならば、適宜復元してください）

サンプル

js
1  $(window).scroll(function() {
2    var windowHeight = $(window).height(100);
3    topWindow = $(window).scrollTop(),
4    targetPosition = $("section3").offset().top;
5    const image = document.querySelectorAll('.img-wrap');
6
7    const observer = new IntersectionObserver(function(entries) {
8      entries.forEach(function(entry) {
9        if (entry.intersectionRatio > 0) {
10          entry.target.classList.add('img-animation');
11        } else {
12          entry.target.classList.remove('img-animation');
13        }
14      });
15    });
16
17
18    Array.prototype.forEach.call(image, function(img) {
19      observer.observe(img);
20    });
21  });

↑を↓に変更。

js
1    const image = document.querySelectorAll('.img-wrap');
2
3    const observer = new IntersectionObserver(function(entries) {
4      entries.forEach(function(entry) {
5        if (entry.intersectionRatio > 0) {
6          entry.target.classList.add('img-animation');
7        } else {
8          entry.target.classList.remove('img-animation');
9        }
10      });
11    });
12
13    Array.prototype.forEach.call(image, function(img) {
14      observer.observe(img);
15    });