SVG morphTo results in "TypeError: $path1.getTotalLength is not a function"

[PapiPeppers]

I have a theme toggle button on my astro site that uses either a sun or a moon icon. I'd like to morph between the sun and moon on clicks, but I'm not sure if I'm doing so properly. Console error reads: TypeError: $path1.getTotalLength is not a function. (In '$path1.getTotalLength()', '$path1.getTotalLength' is undefined). Thanks!

<button
    id="theme-btn"
    title="Toggles light and dark theme"
    type="button"
    aria-label="Color mode toggle"
>
	<div class="icon"><Moon id="moon" /></div>
	<div class="icon"><Sun id="sun" /></div>
</button>

import { animate, utils, svg } from "animejs";

	const [ $button ] = utils.$("#theme-btn");
	const [ $sun ] = utils.$("#sun");
	const [ $moon ] = utils.$("#moon");

	const visibility = $sun.checkVisibility();

	function morphToMoon() {
		animate($sun, {
			d: svg.morphTo($moon),
			ease: "inOutCirc",
			duration: 500
		});
	};

	function morphToSun() {
		animate($moon, {
			d: svg.morphTo($sun),
			ease: "inOutCirc",
			duration: 500
		});
	};

	const morph = (visibility === true) ? morphToMoon : morphToSun;

	$button.addEventListener("click", morph);

Environment details

• OS: macOS
• Browser: Safari
• Version: 4.1.2

[juliangarnier]

https://animejs.com/documentation/svg/morphto only works when targeting a SVGPolygonElement, SVGPolylineElement or SVGPathElement.
And I believe that in your example, #moon and #sun are SVGElement.
You need to be more precise in the the parts of your SVG that you're trying to animate.
Something that should look more like this, but of course you'll need to decide which path element of your icon should be morphed:

animate('#sun path', {
  d: svg.morphTo('#moon path'),
  ease: "inOutCirc",
  duration: 500
});

[PapiPeppers]

That makes sense. Thank you!