javascriptでスクロールをきっかけにアニメーションを実行したい

Question

前提・実現したいこと

HTML,SCSS,JavaScript,jQueryでサイトを作っています。
その中で、特定の位置までのスクロールをきっかけに要素がフェードアップするアニメーションをつけたいのですが、アニメーションが実行されません。

該当のソースコード

<div id="pricing-plan">
    <h1 class="section-title">ほげほげ</h1>
    <div class="pricing-plan-detail fadeUpTrigger">
        <img src="images/Piggy-bank-amico.svg">
        <p>
            ほげほげほげ<br>
            <span class="pricing-plan-marker">ほげほげほげ</span><br>
            ほげほげほげ
        </p>
    </div>
</div>

//fadeUp animation
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeUpTrigger {
  opacity: 0;
}

#pricing-plan {
        margin-bottom: 100px;

        .section-title {
          &::after {
            width: 20%;
          }
        }

        .pricing-plan-marker {
          background: linear-gradient(transparent 50%, #fde975 50%);
        }

        img {
          height: 250px;
        }
      }

// 動きのきっかけとなるアニメーションの名前を定義
function fadeAnime() {
  // ふわっ
  $(".fadeUpTrigger").each(function () {
    //fadeUpTriggerというクラス名が
    var elemPos = $(this).offset().top - 50; //要素より、50px上の
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll >= elemPos - windowHeight) {
      $(this).addClass("fadeUp"); // 画面内に入ったらfadeUpというクラス名を追記
    } else {
      $(this).removeClass("fadeUp"); // 画面外に出たらfadeUpというクラス名を外す
    }
  });
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
  fadeAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
  fadeAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面が読み込まれたらすぐに動かしたい場合の記述

試したこと

• 誤字の確認
• JavaScriptファイルがきちんと読み込まれているか確認
• jQueryのバージョンの確認
• jQueryの読み込みの確認

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

jquery-3.6.0
Safari、chrome両方で試しました。

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題なく動作しました。

ご提示のコードに問題の原因はなく、ご提示いただいていない部分に原因があるかもしれません。

[mymlml]

確認ありがとうございます！
こちらのcodepen上で試してみたところ、私の環境では動作しなかったのですが、（　https://codepen.io/mymlml/pen/GRMqOQK　）こちらでも正しく動作するでしょうか…？

[Lhankor_Mhy]

動作しないですね。
この Codepen のコードが動作しない原因を回答すればいいのですか？

[mymlml]

はい。お願いします！