Accelerating Globe on Scroll

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

<div data-accelerating-globe="" class="globe">
  <div class="globe__before"></div>
  <div class="globe__back">
    <div class="globe__back-circle"></div>
    <div class="globe__back-circle is--1"></div>
    <div class="globe__back-circle is--2"></div>
    <div class="globe__back-circle is--3"></div>
    <div class="globe__back-circle is--4"></div>
    <div class="globe__back-circle is--5"></div>
  </div>
  <div class="globe__front">
    <div class="globe__mirror">
      <div data-accelerating-globe-circle="" class="globe__circle">
        <div class="globe__circle-inner"></div>
      </div>
      <div data-accelerating-globe-circle="" class="globe__circle">
        <div class="globe__circle-inner"></div>
      </div>
      <div data-accelerating-globe-circle="" class="globe__circle">
        <div class="globe__circle-inner"></div>
      </div>
      <div data-accelerating-globe-circle="" class="globe__circle">
        <div class="globe__circle-inner"></div>
      </div>
    </div>
    <div class="globe__mirror is--duplicate">
      <div data-accelerating-globe-circle="" class="globe__circle">
        <div class="globe__circle-inner"></div>
      </div>
      <div data-accelerating-globe-circle="" class="globe__circle">
        <div class="globe__circle-inner"></div>
      </div>
      <div data-accelerating-globe-circle="" class="globe__circle">
        <div class="globe__circle-inner"></div>
      </div>
      <div data-accelerating-globe-circle="" class="globe__circle">
        <div class="globe__circle-inner"></div>
      </div>
    </div>
  </div>
</div>

.globe {
  color: #d500ff;
  justify-content: center;
  align-items: center;
  width: 37.5vw;
  display: flex;
  position: relative;
}

.globe__before {
  padding-top: 100%;
}

.globe__back {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.globe__back-circle {
  border: 1px solid;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
}

.globe__back-circle.is--1 {
  width: 50%;
  height: 16%;
  top: 0%;
}

.globe__back-circle.is--2 {
  width: 87.5%;
  height: 24%;
  top: 14%;
}

.globe__back-circle.is--3 {
  border-radius: 50%;
  width: 100%;
  height: 28%;
  top: 36%;
}

.globe__back-circle.is--4 {
  width: 87.5%;
  height: 24%;
  top: 62%;
}

.globe__back-circle.is--5 {
  width: 50%;
  height: 16%;
  top: 84%;
}

.globe__front, .globe__mirror {
  width: 100%;
  height: 100%;
  position: absolute;
}

.globe__mirror.is--duplicate {
  transform: scaleX(-1);
}

.globe__circle {
  width: 50%;
  height: 100%;
  position: absolute;
  left: auto;
  right: 50%;
  overflow: hidden;
}

.globe__circle-inner {
  border: 1px solid;
  border-radius: 50%;
  width: 200%;
  height: 100%;
  position: absolute;
}

function initAcceleratingGlobe() {
  document.querySelectorAll('[data-accelerating-globe]').forEach(function(globe) {
    const circles = globe.querySelectorAll('[data-accelerating-globe-circle]');
    if (circles.length < 8) return; // Min 8

    const tl = gsap.timeline({
      repeat: -1,
      defaults: { duration: 1, ease: "none" }
    });

    const widths = [
      ["50%", "37.5%"],
      ["37.5%", "25%"],
      ["25%", "12.5%"],
      ["calc(12.5% + 1px)", "calc(0% + 1px)"],
      ["calc(0% + 1px)", "calc(12.5% + 1px)"],
      ["12.5%", "25%"],
      ["25%", "37.5%"],
      ["37.5%", "50%"]
    ];

    circles.forEach((el, i) => {
      const [fromW, toW] = widths[i];
      tl.fromTo(el, { width: fromW }, { width: toW }, i === 0 ? 0 : "<");
    });

    let lastY = window.scrollY;
    let lastT = performance.now();
    let stopTimeout;

    function onScroll() {
      const now = performance.now();
      const dy = window.scrollY - lastY;
      const dt = now - lastT;
      lastY = window.scrollY;
      lastT = now;

      const velocity = dt > 0 ? (dy / dt) * 1000 : 0; // px/s
      const boost = Math.abs(velocity * 0.005);
      const targetScale = boost + 1;

      tl.timeScale(targetScale);

      clearTimeout(stopTimeout);
      stopTimeout = setTimeout(() => {
        gsap.to(tl, {
          timeScale: 1,
          duration: 0.6,
          ease: "power2.out",
          overwrite: true
        });
      }, 100);
    }

    window.addEventListener("scroll", onScroll, { passive: true });
  });
}

// Initialize Accelerating Globe on Scroll
document.addEventListener('DOMContentLoaded', function() {
  initAcceleratingGlobe();
});