アニメーションのタイミング設定のプログラムの解決方法

アニメーションの開始のタイミングについての質問です
jquery最高の教科書という参考書の、回転のアニメーションを参考にして動きのある円チャートを作成しました。
単体では動くのですが、スクロールして可視範囲に入ったらアニメーションさせたく追加でプログラムを組みました。
すると動かなくなりました。
円チャート単体では動いているので、『可視範囲に入ったらアニメーションさせる』プログラムが間違っていると思うのですが調べても解決方法が分からず、知恵をお借りしたく質問しました。

理想としては、スクロールで可視範囲に入ったら、activateScene2 という関数を実行できるようにタイミングを設定するようなプログラムを組みたいです。

htmlのソースコード

<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>Yuto's Room</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> </head> <body>

<!-- ヘッダー -->
<header>
  
</header>

<!-- プロフィール -->
<div class="heading-txt">
  <h2><i class="fas fa-user"></i> PROFILE</h2>
</div>


<!-- スキル -->
<div class="skills heading-txt">
  <h2><i class="fas fa-wrench"></i> SKILLS</h2>
</div>
<div class="container" id="scene-2-content">
  <div class="skill-wrapper">
    <div class="skill-item">
      <!-- パイチャート -->
      <div class="charts">
        <div class="chart" id="pi-html">
          <div class="circle-mask-outer left">
            <div class="circle-mask-inner">
              <div class="circle-body"></div>
            </div>
          </div>
          <div class="circle-mask-outer right">
            <div class="circle-mask-inner">
              <div class="circle-body"></div>
            </div>
          </div>
          <div class="chart-content">
            <p class="text">
              <i class="fab fa-html5 fa-2x html-color"></i>
              <div class="percent">
                <span class="percent-number">70</span>
                <span class="percent-symbol">%</span>
              </div>
            </p>
          </div>
        </div>
      </div>
      <!-- パイチャートここまで -->
      <div class="skill-txt">
        <h3 class="html-color">HTML</h3>
        <p>SEOを考慮し、見やすく、後から編集しやすいコーディングをします。</p>
      </div>
    </div>
    <div class="skill-item">
      <div class="charts">
        <div class="chart" id="pi-css">
          <div class="circle-mask-outer left">
            <div class="circle-mask-inner">
              <div class="circle-body"></div>
            </div>
          </div>
          <div class="circle-mask-outer right">
            <div class="circle-mask-inner">
              <div class="circle-body"></div>
            </div>
          </div>
          <div class="chart-content">
            <p class="text">
              <i class="fab fa-css3-alt fa-2x css-color"></i>
              <div class="percent">
                <span class="percent-number">70</span>
                <span class="percent-symbol">%</span>
              </div>
            </p>
          </div>
        </div>
      </div>
      <div class="skill-txt">
        <h3 class="css-color">CSS</h3>
        <p>後から編集しやすく、パーフェクトピクセルを意識して綺麗にコーディングをします</p>
      </div>
    </div>
  </div>
</div>
<!-- フッター -->
<footer>
  <p><small>&copy; 2020 / Yuto Nagayoshi / All Rights Reserved.</small></p>
</footer>


<!-- JavaScriptファイル -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/script.js"></script>

</body> </html>

cssのコード

@charset "utf-8";

/* 共通 */
body {
width: 100vw;
color: #5fc1c7;
background-color: #000000;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

a {
text-decoration: none;
}

.container {
width: 90%;
margin: 100px auto;
max-width: 1200px;
}

.heading-txt {
background-color: #1d4763;
border-top: #e6e500 dotted 5px;
border-bottom: #e6e500 dotted 5px;
height: 1800px;
width: 100vw;
h2 {
text-align: center;
color: #e6e500;
line-height: 180px;
font-size: 45px;
font-weight: 500;
letter-spacing: 3px;
}
}

/* スキル */
.skill-item {
display: flex;
margin-top: 10px;
}

.skill-wrapper {
margin: 0 15%;
}

.skill-txt {
margin-left: 25px;
margin-top: 10px;
h3 {
font-size: 25px;
}
p {
margin-top: 10px;
letter-spacing: 1;
color: #ffffff;
}
}

/* フッター */
footer {
height: 150px;
background-color: #1d4763;
p {
text-align: center;
line-height: 150px;
}
}

/* パイチャート */
.chart {
position: relative;
width: 80px;
height: 80px;
}

.circle-mask-outer, .circle-mask-inner {
overflow: hidden;
position: absolute;
width: 40px;
height: 80px;
}

.circle-mask-outer.left {
left: 0;
}

.circle-mask-outer.right {
right: 0;
}

.circle-mask-inner {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}

.circle-mask-outer.left {
.circle-mask-inner {
left: 100%;
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
}
}

.circle-mask-outer.right {
.circle-mask-inner {
right: 100%;
-webkit-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
}

.circle-body {
border-radius: 50%;
position: absolute;
width: 80px;
height: 80px;
}

.circle-mask-outer.left {
.circle-body {
right: 0;
}
}

.circle-mask-outer.right {
.circle-body {
left: 0;
}
}

.chart-content {
position: absolute;
top: 9px;
left: 8px;
width: 63px;
height: 63px;
background-color: #fff;
border-radius: 50%;
text-align: center;
.text {
display: flex;
flex-direction: column;
padding-top: 5px;
}
}

.percent {
span {
color: #000000;
}
}

#pi-html {
.circle-body {
background-color: #00a040;
}
}

.html-color {
color: #00a040;
}

#pi-css {
.circle-body {
background-color: #e6191c;
}
}

.css-color {
color: #e6191c;
}

jsのソースコード

$(function(){
/* 回転アニメーションのやつ */
function activateScene2() {
var $content = $('#scene-2-content'),
$charts = $content.find('.chart');

$charts.each(function() {
  var $chart = $(this),
      $circleLeft = $chart.find('.left .circle-mask-inner').css({transform: 'rotate(0)'}),
      $circleRight = $chart.find('.right .circle-mask-inner').css({transform: 'rotate(0)'}),
      $percentNumber = $chart.find('.percent-number'),
      percentData = $percentNumber.text();
  $percentNumber.text(0);

  $({percent: 0}).delay(1000).animate({percent: percentData}, {duration: 1500, progress: function() {
    var now = this.percent,
        deg = now * 360 / 100,
        degRight = Math.min(Math.max(deg, 0), 180),
        degLeft = Math.min(Math.max(deg - 180, 0), 180);
    $circleRight.css({transform: 'rotate(' + degRight + 'deg)'});
    $circleLeft.css({transform: 'rotate(' + degLeft +'deg)'});
    $percentNumber.text(Math.floor(now));
  }});
});

}

/* スクロールしたらアニメーションのやつ */
$(window).on('scroll', function() {
var $skillScroll = $('#skill-scroll');

$skillScroll.each(function() {
  var skillOffset = $(this).offset().top,
      scrollPos = $(window).scrollTop();

  if(scrollPos > skillOffset) {
    $(this).activateScene2();
  }
});

});
});

Lhankor_Mhy

2020/07/03 07:37

ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1

yambejp

2020/07/03 07:56

ソースを画像で貼るということは、回答者が手書きでソースを起こすということです（特に長文の場合）普通はそんなめんどくさいことまでして回答はしません。そもそもなぜ画像で貼ろうと思ったかも不明・・・

yoorwm

2020/07/03 08:25

自分で試したのなら、そのソースを貼り付けるだけなはずですがね。なぜ、画像にしましたか？

Yuto1800

2020/07/03 14:14

大変失礼いたしました。こういった質問の場に慣れておらず、回答してくださる方のことを考えていない配慮がない質問になってしまいました。今後はこういったことがないようにいたします。ご指摘ありがとうございます。質問を編集いたしますので、もう一度質問の場をくださると助かります。もしまだ足りない場合はご指摘ください。改めて大変失礼いたしました。