Jump to content
Search Community

Converting HTML SVG to ReactJS

sayedulkrm test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...