Jump to content
Search Community

useGSAP() scope acting weird

gandarufuuu test
Moderator Tag

Go to solution Solved by gandarufuuu,

Recommended Posts

Hi all,

I'm trying to apply an animation to a certain scope only, using useGSAPs scope option. The weird thing is, on my local react project it only works, if I add ".current" in {scope: ref.current}. Then, however, it also affects elements outside of the scope. If I only write {scope: ref}, the elements outside the scope aren't affected, but neither are the ones inside the scope.

I tried recreating the issue in this stackblitz, but here's it's working as intended 🤯😩
https://stackblitz.com/edit/react-avrbpg?file=src%2FApp.js
 

Any idea, what I could be doing wrong locally? I checked a million times that the ref is on the right div...

See the Pen App.js by edit (@edit) on CodePen

Link to comment
Share on other sites

  • Solution

Okay, I think I figured it out. I had the ref below the scrolltriger element. If I put it higher up in the DOM, it works. In case anyone has the same problem, I'll just leave this topic.

In my case, ".quotecontainer" is the scrolltrigger, so I had to put the ref higher than that.

 

grafik.png

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...