Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

GSAP not working with react after deploying

Recommended Posts

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!


Link to comment
Share on other sites

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.



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

  • Like 3
Link to comment
Share on other sites

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. 

  • Like 3
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.