GSAP not working with react after deploying

[Meshan]

Hi everyone,  I'm making a React site but none of the GSAP animations are working after hosting the site. I removed all of the content except for the animation on the hosted site here: https://5f4eefa6fa0bc400076762a5--nifty-varahamihira-46fbda.netlify.app/ As you can see in the console, there are a ton of errors. The GSAP animation is supposed to fill in the name with a color and move it to the top left corner. The animation works fine on my localhost so I'm assuming I messed something up when deploying. Here's my package.json file so you could see I installed GSAP and React-GSAP: https://github.com/MeshanKhosla/Personal-Portfolio/blob/master/package.json. The animation is located here in the useEffect: https://github.com/MeshanKhosla/Personal-Portfolio/blob/master/src/pages/Home.js

 

I saw the post on chrome extensions being the reason, but I don't believe this is the case since the animations don't work in other browsers/devices either.

 

Thank you for any help!

 

[Ihatetomatoes]

Hi, you have bunch of errors related to SVG element.

 

Also you are not using GSAP3 syntax and you are not targeting the elements using the .current of each element.

 

Here is a guide on React + GSAP, that might help to clean up some of your code.

https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/

 

If you could create a simplified CodePen demo we could help more.

[GreenSock]

Yes, @Meshan, I'd highly recommend checking out the courses from @Ihatetomatoes. He's an expert with both GSAP and React, plus he's a great teacher.