Problem with gsap in react

[Mikołaj]

I have a problem with my gsap script in reat. It works normally in JS when I implement a div called container in React and it moves and disappears, which causes the animation to not work properly, please help. Code below. I am also sending a working animation in a zip.

Work.js work.scss scroll-bar.zip

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; Please provide a Stackblitz demo that clearly illustrates the problem and we'd be glad to take a look. 

 

Here is a starter template you can fork: 

https://stackblitz.com/edit/react-cxv92j

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Also, phrases like "...doesn't work properly" isn't very helpful. Please be specific about precisely isn't working the way you'd expect. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Mikołaj]

Hi, I uploaded my code to stackblitz. I have a problem that the animation doesn't look correct. My container should be pinned with a pin and sections should scroll left when scrolling and the bar and svg should fill in red. Normally when I implemented it in a plain html,cs and js file. The animation works fine, but it doesn't work in React. The files are in zip.

https://stackblitz.com/edit/react-utcnhd?file=src%2FApp.js,src%2Fstyle.css

scroll-bar.zip

[GreenSock]

You weren't doing proper cleanup. That's a React thing. It calls the useEffect() multiple times in strict mode, and you weren't reverting the tweens/ScrollTriggers properly. So you had duplicates conflicting. That's why it's a good idea to use the useGSAP() hook instead of useEffect() - it handles that for you. 

 

You also had a different structure to your markup than in your plain HTML version. I'm not sure exactly what you're trying to do, but maybe this will get you going in the right direction: 

https://stackblitz.com/edit/react-ztc5vg?file=src%2FApp.js

[Mikołaj]

Thanks, that's works! I dont know about useGsap().