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.
