juliangarnier/anime · error · Error

Can't morph to an invalid target. 'path2' must resolve to an

Error message

Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element.

What it means

Error "Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element." thrown in juliangarnier/anime.

Source

Thrown at src/svg/morphto.js:28

 * @import {
 *   TargetsParam,
 *   FunctionValue
 * } from '../types/index.js'
*/

/**
 * @param  {TargetsParam} path2
 * @param  {Number} [precision]
 * @return {FunctionValue}
 */
export const morphTo = (path2, precision = .33) => ($path1, index, total, prevTween) => {
  const tagName1 = ($path1.tagName || '').toLowerCase();
  if (!tagName1.match(/^(path|polygon|polyline)$/)) {
    throw new Error(`Can't morph a <${$path1.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
  }
  const $path2 = /** @type {SVGGeometryElement} */(getPath(path2));
  if (!$path2) {
    throw new Error("Can't morph to an invalid target. 'path2' must resolve to an existing <path>, <polygon> or <polyline> SVG element.");
  }
  const tagName2 = ($path2.tagName || '').toLowerCase();
  if (!tagName2.match(/^(path|polygon|polyline)$/)) {
    throw new Error(`Can't morph a <${$path2.tagName}> SVG element. Use <path>, <polygon> or <polyline>.`);
  }
  const isPath = $path1.tagName === 'path';
  const separator = isPath ? ' ' : ',';
  const previousPoints = prevTween ? prevTween._value : null;
  if (previousPoints) $path1.setAttribute(isPath ? 'd' : 'points', previousPoints);

  let v1 = '', v2 = '';

  if (!precision) {
    v1 = $path1.getAttribute(isPath ? 'd' : 'points');
    v2 = $path2.getAttribute(isPath ? 'd' : 'points');
  } else {
    const length1 = /** @type {SVGGeometryElement} */($path1).getTotalLength();
    const length2 = $path2.getTotalLength();

View on GitHub (pinned to 01b81be1df)

Solutions

1. Pass a valid selector, element or path string that resolves to an existing <path>, <polygon> or <polyline> in the DOM.
2. Verify the target element exists and is mounted before the morph animation starts.

Example fix

// Wrong: '#missing' matches nothing
svg.morphTo('#missing');
// Fix: target an existing morphable element
// <path id="target" d="M10 10 H90 V90 H10 Z"/>
svg.morphTo('#target');

When it happens

Trigger: Thrown at src/svg/morphto.js:28 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of juliangarnier/anime@01b81be1df (2026-08-12). Data as JSON: /api/errors/0390c4a6245eebb1. Report an issue: GitHub.