Help with DrawSvgPlugin

[PhoenixNile]

I current signed up and bought the package to become a club house member, I love what you guys do and wanted to show my support! So I have been working on my React Portfolio Website recently and used the DrawSVGPlugin, I installed the zip file and everything works on my localhost, but when I deployed to Netlify it doesn't show up. When I inspect the page using the dev tools I see my image and logo outline are there but hidden. I have attached bellow the code and pictures from the localhost and live site any help will be much appreciated thank you in advanced!!

[PhoenixNile]

After console logging in my development and production I found that the first part of my useEffect runs and shows the bgRefs, it's just the anonymous function starting on line 18 doesn't run in production. 

[elegantseagulls]

I think that the return function in a useEffect will only run on unmount. Try moving your timeline outside of that, and into your useEffect. You may also need to run a check to see if your ref exists in the dom. This article may be very helpful to you:

 

[GreenSock]

Yep, @elegantseagulls seems exactly right. From what I see, you're actually trying to create your tweens inside a cleanup function. You should created it inside the useEffect() or useLayoutEffect() normally, and then revert it in the cleanup function. 

 

Keep in mind that in React 18+ calls useEffect() TWICE in strict mode (which is the default in local development) so it's critical to do proper cleanup in order to avoid creating multiple conflicting animations. In your demo, it probably worked BECAUSE of the odd double-call to useEffect() since it called the cleanup function once but the useEffect() twice. 

 

gsap.context() is your new best friend in React - it makes cleanup super easy and also allows you to use scoped selector text. Please read this article: 

 

So just use a gsap.context() and do proper cleanup: 

 useEffect(() => {
   let ctx = gsap.context(() => {
     // put all your GSAP/ScrollTrigger code inside here...
   });
   return () => ctx.revert(); // <-- CLEANUP!
 }, []);

Does that resolve things? If not, please provide a CodeSandbox or Stackblitz illustrating the problem and we'd be happy to take a peek. But I bet the issue is just not doing proper cleanup. Here are some React starter templates with GSAP: 

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

And thanks for signing up for Club GreenSock to show your support! 💚🥳

 

Happy tweening!

[PhoenixNile]

 useEffect(() => {
   let ctx = gsap.context(() => {
     // put all your GSAP/ScrollTrigger code inside here...
   });
   return () => ctx.revert(); // <-- CLEANUP!
 }, []);

This worked!! Thank you so much for sharing the docs with me and reaching back out so quickly!