html

<div class="countarea"></div>
<div class="count">
  <p class="count1">0%</p>
  <p class="count2">0%</p>
</div>

JavaScript

/* スクロールアニメーションを設定 */
// スクロール率を取得
let scrollPercent = 0;
const scrollHeight = document.documentElement.scrollHeight; // ページの総スクロール量を取得
const clientHeight = document.documentElement.clientHeight; // デバイス表示領域の高さを取得
document.body.onscroll = function () {
  const scrollTop = document.documentElement.scrollTop; //ブラウザ際上部からのスクロール量を取得
  scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100; // 何%スクロールしているかを算出
};
// アニメーションさせる要素を取得
const count1 = document.querySelector(".count1");
const count2 = document.querySelector(".count2");
// 線形補完 第一引数:開始時 第二引数:終了時 第三引数:上限
function lerp(x, y, a) {
  return (1 - a) * x + a * y;
}
function scalePercent(start, end) {
  return (scrollPercent - start) / (end - start);
}
// アニメーション配列を設定
const animationScripts = [];
animationScripts.push(
  {
    start: 0, // アニメーションが開始される位置
    end: 50, // アニメーションが終了する位置
    function() {
      count1.innerHTML = scrollPercent + "%";
      // 線形補完の引数にstart end の数値を一致させる事でアニメーションが実行されるスクロール範囲とアニメーションの開始終了が一致する
      count1.style.transform = `translateX(${lerp(0, 100, scalePercent(0, 50))}px)`;
    },
  },
  {
    start: 51, // アニメーションが開始される位置
    end: 100, // アニメーションが終了する位置
    function() {
      count2.innerHTML = scrollPercent + "%";
      // 線形補完の引数にstart end の数値を一致させる事でアニメーションが実行されるスクロール範囲とアニメーションの開始終了が一致する
      count2.style.transform = `translateX(${lerp(0, 100, scalePercent(51, 100))}px)`;
    },
  }
);
// アニメーション関数を設定
function playScrollAnimation() {
  animationScripts.forEach(function (animation) {
    if (scrollPercent >= animation.start && scrollPercent <= animation.end) {
      animation.function();
    }
  });
}

addEventListener("scroll", playScrollAnimation);

scss

.countarea {
  height: 200vh;
}
.count {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}