SVG Path Draw

// ── Técnica strokeDashoffset ──
// Funciona sin plugins de pago

function preparePath(path) {
  const len = path.getTotalLength();

  // Dash igual a la longitud total
  gsap.set(path, {
    strokeDasharray:  len,
    strokeDashoffset: len, // oculto
  });
  return len;
}

// ── Animar el dibujo ──
function drawPath(path, delay = 0) {
  const len = preparePath(path);

  return gsap.to(path, {
    strokeDashoffset: 0, // visible
    duration: 1.2,
    delay,
    ease: 'power2.inOut',
    onUpdate() {
      // Calcular progreso 0-100
      const pct = 1 - (
        gsap.getProperty(path, 'strokeDashoffset')
        / len
      );
      updateProgress(path, pct);
    }
  });
}

// ── Timeline con overlap ──
const tl = gsap.timeline();
tl
  .add(drawPath(spine))
  .add(drawPath(topBranch),  '-=0.6')
  .add(drawPath(botBranch),  '-=0.8')
  .to(nodes, {
    r: 6, duration: 0.4,
    stagger: 0.08,
    ease: 'back.out(2)'
  });

strokeDasharray = length — crea un
único trazo igual al camino completo.

strokeDashoffset = length lo oculta.
Animar a 0 lo va "revelando".

getTotalLength() devuelve la longitud
exacta del SVGPathElement en píxeles.

Sin plugins de pago. Funciona en
cualquier path, polyline o shape SVG.