Chapter 161: Anchor Points to Progress Values (Helper)

Core Idea

A helper that converts every anchor point along an SVG path into its progress value (0-1) relative to the path's total length, so you can drive point-by-point animation (e.g. with DrawSVG) instead of only smooth continuous motion. Requires MotionPathPlugin.

Key Concepts

• Accepts a raw path (or converts a selector/path element via MotionPathPlugin.getRawPath()).
• Uses MotionPathPlugin.cacheRawPathMeasurements() at a given sampling resolution to measure segment lengths.
• Returns an array of progress values, one per anchor, always starting at 0.

Code Examples

function anchorsToProgress(rawPath, resolution) {
  resolution = ~~resolution || 12;
  if (!Array.isArray(rawPath)) rawPath = MotionPathPlugin.getRawPath(rawPath);
  MotionPathPlugin.cacheRawPathMeasurements(rawPath, resolution);
  let progress = [0], length, s, i, e, segment, samples;
  for (s = 0; s < rawPath.length; s++) {
    segment = rawPath[s];
    samples = segment.samples;
    e = segment.length - 6;
    for (i = 0; i < e; i += 6) {
      length = samples[(i / 6 + 1) * resolution - 1];
      progress.push(length / rawPath.totalLength);
    }
  }
  return progress;
}

• What it demonstrates: turning path geometry into a list of progress checkpoints usable for stepped/point-based animation.

Key Takeaways

1. Requires gsap.registerPlugin(MotionPathPlugin).
2. Higher resolution improves measurement accuracy at the cost of computation.

Connects To

• MotionPathPlugin: source of the raw-path measurement APIs this helper wraps.
• DrawSVG: the typical plugin used to animate the resulting progress checkpoints.