React - Invalid Scope -Gsap target not found / using Scroll Trigger

[Kepler]

 

I keep getting this occasional issue on page refresh - the local development environment 

• the animations are not getting triggered on the component is on view -
• and messages on the console 

 

Could my code implementation on React be causing the issue?

https://codesandbox.io/s/react-gsap-2lmcof?file=/src/data.js

I was not  able to reproduce the issue on codesand box - but it's a simplifcy version how i'm implenenting Gsap on react / next.js app.

 

I'm new to width GSAP but I'm super excited to build more animations with it.

 

Thank you 

See the Pen data.js by s (@s) on CodePen.

[GreenSock]

First of all, welcome aboard! We love hearing about folks excitedly learning GSAP. You're in good company. 

 

12 minutes ago, Kepler said:

I was able to reproduce the issue on codesandbox - but it's a simplify version how i'm implementing Gsap on react / next.js app.\

Did you mean to say that you couldn't replicate it on Codesandbox? Or is there a trick to reproducing the issue? I don't see any errors in the console. 

 

My guess is that the problem is only in your dev environment that's trying to do live injection. In other words, the browser isn't actually refreshing all the content - your dev environment is trying to only locally inject in some new content, swapping out elements which would never actually happen in a "real" browser environment. That error basically means that when the code runs inside the gsap.context(), your animePanel.current is null or something like that. The element doesn't exist. 

 

Again, I'm guessing here (since I can't reproduce the problem) but I'd bet that if you do a "real" browser refresh (rather than a dev tool automatically injecting partial DOM stuff), you won't experience the problem. Is that correct? 

[Kepler]

2 minutes ago, GreenSock said:

First of all, welcome aboard! We love hearing about folks excitedly learning GSAP. You're in good company. 

 

Did you mean to say that you couldn't replicate it on Codesandbox? Or is there a trick to reproducing the issue? I don't see any errors in the console. 

 

My guess is that the problem is only in your dev environment that's trying to do live injection. In other words, the browser isn't actually refreshing all the content - your dev environment is trying to only locally inject in some new content, swapping out elements which would never actually happen in a "real" browser environment. That error basically means that when the code runs inside the gsap.context(), your animePanel.current is null or something like that. The element doesn't exist. 

 

Again, I'm guessing here (since I can't reproduce the problem) but I'd bet that if you do a "real" browser refresh (rather than a dev tool automatically injecting partial DOM stuff), you won't experience the problem. Is that correct? 

Thank you Jack 
My apologies , You're correct I was not able to reproduce the issue on Codesanbox.
You're absolutlly correct I don;t see the issue if I'm not on develoment mode - (that uses  hot-reload ).

Thank you very much 
 

[GreenSock]

Great! Glad you figured it out. "Hot reloading" is the term I was looking for, thanks.