Lottie Scroll Orbit Rings — Rings Spin on Scroll

<section class="orb-stage" id="orbStage">
  <div class="orb-intro-overlay"><p>Scroll ↓ to spin the rings</p></div>
  <div class="orb-wrap"><div class="orb-canvas" id="orbMount"></div></div>
  <div class="orb-hud"><span id="orbPct">0</span>% spun</div>
</section>
<section class="orb-bottom"><p>The rings have aligned — scroll up to wind them back.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0a0a12;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.orb-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#7c83a6;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.orb-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,#15162c 0%,#0a0a12 60%)}
.orb-intro-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#8a90c0;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease}
.orb-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.orb-canvas{width:340px;height:340px}
.orb-canvas svg{display:block;filter:drop-shadow(0 0 26px rgba(116,132,250,.35))}
.orb-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#a5b4fc;text-transform:uppercase;opacity:.85}

const mount = document.getElementById('orbMount');
const pctEl = document.getElementById('orbPct');
const intro = document.querySelector('.orb-intro-overlay');

// Build Lottie JSON in code. Every animated keyframe gets its i/o easing
// tangents — without them lottie-web holds the value and nothing rotates.
const S = (v) => ({ a: 0, k: v });
function kfS(pairs) {
  return { a: 1, k: pairs.map((p, i) => i < pairs.length - 1
    ? { i: { x: [0.5], y: [0.5] }, o: { x: [0.5], y: [0.5] }, t: p[0], s: [p[1]] }
    : { t: p[0], s: [p[1]] }) };
}
function layer(ind, nm, rotDeg, shapes) {
  return { ddd: 0, ind, ty: 4, nm, sr: 1,
    ks: { o: S(100), r: kfS([[0, 0], [120, rotDeg]]), p: S([170, 170, 0]), a: S([0, 0, 0]), s: S([100, 100, 100]) },
    ao: 0, shapes, ip: 0, op: 120, st: 0, bm: 0 };
}

// An arc = a stroked ellipse trimmed to part of its circumference, plus a dot
// riding the arc's leading end. Rotating the whole layer sweeps it around.
function ring(radius, arcPct, color, width) {
  return [
    { ty: 'gr', it: [
      { ty: 'el', d: 1, s: S([radius * 2, radius * 2]), p: S([0, 0]) },
      { ty: 'tm', s: S(0), e: S(arcPct), o: S(0), m: 1 },   // static partial arc
      { ty: 'st', c: S(color), o: S(100), w: S(width), lc: 2, lj: 2 },
      { ty: 'tr', p: S([0, 0]), a: S([0, 0]), s: S([100, 100]), r: S(0), o: S(100) },
    ] },
    { ty: 'gr', it: [
      { ty: 'el', d: 1, s: S([width + 6, width + 6]), p: S([radius, 0]) },   // dot at 3 o'clock (arc start)
      { ty: 'fl', c: S([1, 1, 1, 1]), o: S(100) },
      { ty: 'tr', p: S([0, 0]), a: S([0, 0]), s: S([100, 100]), r: S(0), o: S(100) },
    ] },
  ];
}

// A faint full track ring behind each arc.
function track(radius, width) {
  return { ddd: 0, ind: 90 + radius, ty: 4, nm: 'track' + radius, sr: 1,
    ks: { o: S(12), r: S(0), p: S([170, 170, 0]), a: S([0, 0, 0]), s: S([100, 100, 100]) },
    ao: 0, ip: 0, op: 120, st: 0, bm: 0,
    shapes: [{ ty: 'gr', it: [
      { ty: 'el', d: 1, s: S([radius * 2, radius * 2]), p: S([0, 0]) },
      { ty: 'st', c: S([1, 1, 1, 1]), o: S(100), w: S(width), lc: 2, lj: 2 },
      { ty: 'tr', p: S([0, 0]), a: S([0, 0]), s: S([100, 100]), r: S(0), o: S(100) },
    ] }] };
}

const animationData = {
  v: '5.7.4', fr: 60, ip: 0, op: 120, w: 340, h: 340, nm: 'orbit-rings', ddd: 0, assets: [],
  layers: [
    // central hub
    { ddd: 0, ind: 1, ty: 4, nm: 'hub', sr: 1,
      ks: { o: S(100), r: S(0), p: S([170, 170, 0]), a: S([0, 0, 0]), s: S([100, 100, 100]) },
      ao: 0, ip: 0, op: 120, st: 0, bm: 0,
      shapes: [{ ty: 'gr', it: [
        { ty: 'el', d: 1, s: S([26, 26]), p: S([0, 0]) },
        { ty: 'fl', c: S([0.55, 0.6, 1, 1]), o: S(100) },
        { ty: 'tr', p: S([0, 0]), a: S([0, 0]), s: S([100, 100]), r: S(0), o: S(100) },
      ] }] },
    layer(2, 'ringA', 300,  ring(58,  72, [0.45, 0.53, 0.98, 1], 8)),
    layer(3, 'ringB', -240, ring(100, 55, [0.66, 0.42, 0.95, 1], 8)),
    layer(4, 'ringC', 200,  ring(140, 40, [0.36, 0.85, 0.95, 1], 8)),
    track(58, 8), track(100, 8), track(140, 8),
  ],
};

// Load but DON'T autoplay — scroll drives the rotation.
const anim = lottie.loadAnimation({
  container: mount, renderer: 'svg', loop: false, autoplay: false, animationData,
});

let total = 0;
anim.addEventListener('DOMLoaded', () => { total = anim.totalFrames; });

gsap.registerPlugin(ScrollTrigger);

const state = { p: 0 };
gsap.to(state, {
  p: 1, ease: 'none',
  scrollTrigger: { trigger: '#orbStage', start: 'top top', end: '+=400%', scrub: 0.5, pin: true },
});

function tick() {
  requestAnimationFrame(tick);
  if (!total) return;
  const p = Math.max(0, Math.min(1, state.p));
  anim.goToAndStop(p * (total - 1), true);
  pctEl.textContent = Math.round(p * 100);
  if (intro) intro.style.opacity = p > 0.02 ? '0' : '1';
}
tick();