Jump to content
Search Community

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

Kepler test
Moderator Tag

Go to solution Solved by Kepler,

Recommended Posts


 

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 image.thumb.jpeg.2e534c2ef8a10104b39bf744f8625737.jpeg

 

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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

  • Solution
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 
 

  • Like 1
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.
×
×
  • Create New...