problem with morphing svg shapes in javascript – Blancer.com Tutorials and projects

i have two quite “complex” svgs, the first of them being a text of five words and the other svg is a simple house without many details. What I would like to achieve is that the first svg sort of morphs into the house for a loading animation on a website. Nothing too fancy needs to happen as an animation.
I’ve been trying to find a solution for the last six hours but nothing really helped. I’ve stumbled across GSAP and SVGator but unless it’s the last resort i prefer not to pay money for it. LottieFiles also didn’t work, somehow there was no animation and i’ve spent an hour researching without any results. Then I’ve tried something else, but i forgot the name of it, but it didn’t work anyway. My latest effort was using flubber.js which also didn’t solve the problem. Now i get this error here:

index.8cfc62b9.js:3717 Uncaught TypeError: All shapes must be supplied as arrays of [x, y] points or an SVG path string (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).
Example valid ways of supplying a shape would be:
[[0, 0], [10, 0], [10, 10]]
"M0,0 L10,0 L10,10Z"

    at normalizeRing (index.8cfc62b9.js:3717:44)
    at fromShape (index.8cfc62b9.js:619:50)
    at fromCircle (index.8cfc62b9.js:605:12)
    at 6rimH../node_modules/flubber/src/shape.js (index.8cfc62b9.js:584:59)
    at newRequire (index.8cfc62b9.js:71:24)
    at index.8cfc62b9.js:122:5
    at index.8cfc62b9.js:145:3

my code looks like this:

HTML



<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script type="module" src="script.js" defer></script>
      <script src="https://unpkg.com/[email protected]" defer></script>
      <link rel="stylesheet" href="style.css">
      <title>Document</title>
</head>

<body>


      <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 953.45 525.92">
            <g id="Layer_1-2" data-name="Layer 1">
                  <path id="text"
                        d="just the path, too long to copy paste" />
                  <path id="house"
                        d="just the path, too long to copy paste" />
            </g>

      </svg>
</body>

</html>

JS vanilla

import { toCircle, fromCircle } from "./node_modules/flubber/src/shape.js";

const text = document.getElementById("text");
const house = document.getElementById("house");

const textPath = text.getAttribute("d");
const housePath = house.getAttribute("d");

console.log(typeof textPath);

const textToCircleInterpolator = toCircle(textPath, 100, 100, 50); 
const circleToHouseInterpolator = fromCircle(housePath, 100, 100, 50);

I cannot explain to myself why i get this error, because when i check with typeof it confirms that both variables hold strings. I don’t know what I could tell further, my head is smoking and english isn’t my first language and i struggle finding the words right now.

I would really appreciate it if anyone could help. Doesn’t have to be with flubber, just a suggestion of another library would be appreciated. As i said, i think the transformation is quite complex since both path have different lengths, i even thought it might be better animating it it aftereffects or something non-code based and then just import the animation.

thanks for your help!