What causes "A motion path must have at least two anchors." in greensock/GSAP?

Ensure the motion path has at least two anchor points

A motion path must have at least two anchors.

Error message

A motion path must have at least two anchors.

What it means

MotionPathHelper's editor requires at least two anchor points to represent a path. When the path editor's anchor list drops below two (e.g. after deleting anchors or supplying a degenerate path), refreshPath warns instead of invalidating/restarting the scrub animation.

Source

Thrown at src/MotionPathHelper.js:196

			vars.anchorSnap = p => {
				if (p.x * p.x + p.y * p.y < 16) {
					p.x = p.y = 0;
				}
			};
		}

		animationToScrub = animation && animation.parent && animation.parent.data === "nested" ? animation.parent.parent : animation;

		vars.onPress = () => {
			animationToScrub.pause(0);
		};

		refreshPath = () => {
			//let m = _getConsolidatedMatrix(path);
			//animation.vars.motionPath.offsetX = m.e - offset.x;
			//animation.vars.motionPath.offsetY = m.f - offset.y;
			if (this.editor._anchors.length < 2) {
				console.warn("A motion path must have at least two anchors.");
			} else {
				animation.invalidate();
				animationToScrub.restart();
			}
		};
		vars.onRelease = vars.onDeleteAnchor = refreshPath;

		this.editor = PathEditor.create(path, vars);
		if (vars.center) {
			gsap.set(target, {transformOrigin:"50% 50%", xPercent:-50, yPercent:-50});
		}
		if (animation) {
			if (animation.vars.motionPath.path) {
				animation.vars.motionPath.path = path;
			} else {
				animation.vars.motionPath = {path:path};
			}
			if (animationToScrub.parent !== gsap.globalTimeline) {

View on GitHub (pinned to 13e2b79054)

Solutions

Ensure the motion path has at least two anchor points
Guard anchor deletion so at least two remain
Regenerate the path from valid multi-point data before attaching the helper

Example fix

// before
vars.onDeleteAnchor = () => { editor.deleteSelectedAnchor(); }; // can drop to 1
// after (library-internal guard)
if (editor._anchors.length < 2) {
  console.warn("A motion path must have at least two anchors.");
  return;
}

Defensive patterns

Strategy: validation

Validate before calling

const pts = pathData.trim().split(/(?=[ML])/); if (pts.length < 2) { throw new Error('Path needs at least 2 anchors'); }

Type guard

const hasEnoughAnchors = (editor) => Array.isArray(editor?._anchors) && editor._anchors.length >= 2;

Prevention

Validate path data (>=2 points) before creating MotionPathHelper
Disable anchor deletion below two anchors in custom editor UIs
Sanitize dynamically generated SVG paths for degenerate single-point data

When it happens

Trigger: Deleting anchors in the visual editor until one remains; passing a path element/motionPath with a single point; path data that consolidates to fewer than two anchors on release.

Common situations: Manual editing sessions where users remove points; programmatically generated paths with insufficient points; SVG path with only a moveto command.

Related errors

AI-assisted analysis of greensock/GSAP@13e2b79054 (2026-08-29). Data as JSON: /api/errors/83fd1ea17d701c39. Report an issue: GitHub.