[Converting HTML SVG to ReactJS]

3 hours ago, Rodrigo said:

Hi,

 

On top of Jack's great advice keep this URL in your bookmarks, super useful when working with complex SVG and you don't want to fix with all the linting errors by hand:

https://svg2jsx.com/

 

Happy Tweening!

Yeah sure. Thanks for the link :))

[Converting HTML SVG to ReactJS]

Thank you for the solution @GreenSock

[Converting HTML SVG to ReactJS]

I'm a beginner at GSAP.

I have a complex SVG which runs perfectly in HTML. I'm trying to convert it into React by using GSAP.

How can I convert the HTML SVG in react?

Here's the link to HTML SVG: https://codesandbox.io/s/demo-svg-html-esf3dc?file=/index.html
While you put hover over the circle it is animated.
Here's the Link to my React App: https://codesandbox.io/s/framer-motion-svg----3333-zcvdk1?file=/src/components/MainSVG.js

I try to put all curves parents' id in the motion path. I got an error. Now as you can see I just put only 1 path id in the motion path and all works like a mess.

 

Here's a JS function but I don't know where and how to add that in react. Maybe if I add that to my code it will work.

const existElementId = (e) => {
    return document.getElementById(e)
}
existElementId("circle" + 1)

for (let i = 1; null != existElementId("circle" + i); i++) {
    console.log(existElementId("circle" + i))
    let tl = gsap.timeline({ repeat: -1 });
    tl.to("#dot" + i, {
        duration: document.querySelectorAll("#curve" + i + " path")[0].getTotalLength() / 200,
        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'm expecting to get any solution/idea to make it like the index.html file.

[Creating a Custom Complex SVG using GSAP for reactjs]

Is it possible to create that by code using GSAP?