Converting HTML SVG to ReactJS

[sayedulkrm]

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.

[GreenSock]

Is this what you were looking for?: 

https://codesandbox.io/s/framer-motion-svg----3333-forked-ureg07?file=/src/components/MainSVG.js

 

I would highly recommend reading this article: 

 

gsap.context() is your best friend when working in React. It makes cleanup super easy. 

[Rodrigo]

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!

[sayedulkrm]

Thank you for the solution @GreenSock

[sayedulkrm]

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 :))