Scroll Liquid Blob Morph — SVG Path Interpolation Effect

<section class="blob-stage" id="blobStage">
  <div class="blob-intro"><p>Scroll ↓ to morph the liquid blob</p></div>
  <svg class="blob-svg" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet">
    <defs>
      <linearGradient id="blobGrad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#7c3aed"/>
        <stop offset="50%" stop-color="#ec4899"/>
        <stop offset="100%" stop-color="#f59e0b"/>
      </linearGradient>
    </defs>
    <path id="blobPath" fill="url(#blobGrad)"></path>
  </svg>
  <div class="blob-hud"><span id="blobStageLabel">Sphere</span></div>
</section>
<section class="blob-bottom"><p>Four shapes, one continuous gooey path.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0b0713;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.blob-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#8a7aa8;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.blob-stage{height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#1a0f2e 0%,#0b0713 75%)}
.blob-intro{position:absolute;top:12%;left:0;right:0;display:flex;justify-content:center;text-align:center;padding:0 24px;pointer-events:none;z-index:5;color:#c9b6ec;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;}
.blob-svg{width:min(70vw,420px);height:min(70vw,420px);filter:drop-shadow(0 0 40px rgba(236,72,153,.35))}
.blob-hud{position:absolute;left:24px;bottom:24px;font-size:13px;letter-spacing:.14em;color:#f0abfc;text-transform:uppercase;opacity:.85}

var pathEl = document.getElementById('blobPath');
var labelEl = document.getElementById('blobStageLabel');
var introEl = document.querySelector('.blob-intro');
var CX = 200, CY = 200, BASE = 130;
var N = 8;

// Four hand-authored blob shapes as radius factors (0.6-1.4) at N evenly
// spaced angles. Interpolating between these arrays (rather than raw SVG
// path strings) is what makes smooth in-between morph frames possible
// without a paid MorphSVG plugin.
var shapes = [
  [1, 1, 1, 1, 1, 1, 1, 1],
  [1.28, 0.82, 1.15, 0.7, 1.3, 0.78, 1.1, 0.85],
  [0.75, 1.3, 0.68, 1.22, 0.72, 1.35, 0.66, 1.18],
  [1.1, 0.9, 1.35, 0.78, 0.95, 1.2, 0.8, 1.25],
];
var labels = ['Sphere', 'Amoeba', 'Droplet', 'Ripple'];

function buildPath(radii) {
  var pts = [];
  for (var i = 0; i < N; i++) {
    var a = (i / N) * Math.PI * 2;
    var r = BASE * radii[i];
    pts.push([CX + Math.cos(a) * r, CY + Math.sin(a) * r]);
  }
  var d = 'M ' + pts[0][0].toFixed(2) + ',' + pts[0][1].toFixed(2) + ' ';
  for (var j = 0; j < N; j++) {
    var p0 = pts[(j - 1 + N) % N];
    var p1 = pts[j];
    var p2 = pts[(j + 1) % N];
    var p3 = pts[(j + 2) % N];
    var c1x = p1[0] + (p2[0] - p0[0]) / 6;
    var c1y = p1[1] + (p2[1] - p0[1]) / 6;
    var c2x = p2[0] - (p3[0] - p1[0]) / 6;
    var c2y = p2[1] - (p3[1] - p1[1]) / 6;
    d += 'C ' + c1x.toFixed(2) + ',' + c1y.toFixed(2) + ' ' + c2x.toFixed(2) + ',' + c2y.toFixed(2) + ' ' + p2[0].toFixed(2) + ',' + p2[1].toFixed(2) + ' ';
  }
  d += 'Z';
  return d;
}

// A single live array of radii is what GSAP actually tweens; the SVG path
// string is regenerated from it on every tween update.
var live = shapes[0].slice();
function render() {
  pathEl.setAttribute('d', buildPath(live));
}
render();

gsap.registerPlugin(ScrollTrigger);

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: '#blobStage',
    start: 'top top',
    end: '+=400%',
    scrub: 0.6,
    pin: true,
  },
});

for (var s = 1; s < shapes.length; s++) {
  (function (target, idx) {
    var proxy = {};
    for (var k = 0; k < N; k++) proxy[k] = live[k];
    tl.to(proxy, {
      duration: 1,
      ease: 'sine.inOut',
      onUpdate: function () {
        for (var k2 = 0; k2 < N; k2++) live[k2] = proxy[k2];
        render();
      },
      onStart: function () { labelEl.textContent = labels[idx]; },
      ...(function () {
        var vars = {};
        for (var k3 = 0; k3 < N; k3++) vars[k3] = target[k3];
        return vars;
      })(),
    });
  })(shapes[s], s);
}

ScrollTrigger.create({
  trigger: '#blobStage',
  start: 'top top',
  end: '+=40',
  onLeave: function () { if (introEl) introEl.style.opacity = '0'; },
  onEnterBack: function () { if (introEl) introEl.style.opacity = '1'; },
});