Uncaught TypeError: Cannot read properties of Undefined (reading ‘getTotalLength’)

I’m trying to animate the SVG with GSAP. But the console.log says “Uncaught TypeError: Cannot read properties of undefined (reading ‘get total length’)”. It reacts project and this is the code I used inside of “useEffect”.

Can anyone tell me what’s wrong with my code?

    useEffect(() => {

        for(let i = 1; null != existElementId("circle" + i); i++){

            let tl = gsap.timeline({ repeat: -1 });

        tl.to("#dot" + i, {
        duration: document.querySelectorAll("#curve" + i + "path")[0].getTotalLength() / 200,
        repeat: Infinity,
        repeatDelay: 0,
        yoyo: false,
        ease: "none",
        motionPath: {
            path: "#curve" + i + "path",
            align: "#curve" + i + "path",
            
            alignOrigin: [0.5, 0.5]
        }
        });
        
    
        tl.pause()
    existElementId("circle" + i).onmouseover = () => {
        tl.play()
    }
    existElementId("circle" + i).onmouseleave = () => {
        tl.pause().time(0)
    }
    
    }
    
    }, []);

I try to search on google but most of the answers were about “null”

This is the original code in Sandbox: https://codesandbox.io/s/framer-motion-svg—-3333-copy-copy-8olgrp?file=/src/components/MainSVG.js

Answer

If you look closely, you’ll see a space missing in "#curve" + i + "path". You can check here: https://codesandbox.io/s/framer-motion-svg—-3333-copy-copy-forked-2mglwz?file=/src/components/MainSVG.js

Advertisement

Answer