Jump to content
GreenSock

JeremyLove

Scrolltrigger onUpdate self.isActive doesnt give correct response

Recommended Posts

im using onUpdate:(self) => currentClass(self), and im passing the properties of self into a function and when I try to get property isActive it always comes back as true even though the console log it says its false. Any ideas on why this is happening?

 

Here is a screenshot.

image.png.49c9a6da07fc7ebd0618ae1d2dadf323.png

See the Pen OJjorMM by jeremylion (@jeremylion) on CodePen

Link to comment
Share on other sites

Welcome to the forums @JeremyLove

 

There is no scrolling in your demo, so I'm not sure what you are trying to do. The only thing that logs out is on complete.

 

Regardless, you are logging out an object, which may have changed by the time you inspect it. Whatever isActive logs out is the value at that point in time. This has nothing to do with GSAP, and is how JavaScript works. Try searching for JavaScript value vs reference.

 

You can see it action here. Notice how I change the isActive after logging it out, but if you inspect it, it will be different.

 

See the Pen gOxdZvM by GreenSock (@GreenSock) on CodePen

 

image.png

 

Link to comment
Share on other sites

@OSUblake

 

There seems to be a problem with the codepen when on this page. When you click edit the codepen you should be able to see the scrolling functionality. Basically what I am trying to do is add a class on the current div as you as you leave it. onLeave and onLeaveBack seem to trigger my function too late. So am i trying to do this by utilizing onUpdate since it triggers my function instantly. I need to use the isActive prop to get the current section I am leaving and add the class to it. I can change it if it doesnt target the right div.

 

Does this kinda make sense?

Link to comment
Share on other sites

You have media queries that prevent it from working unless my screen is really wide.

 

But you should just leverage the toggleClass property. The problem you have is that your section triggers overlap, so something like this.

 

See the Pen PoKdXvm by GreenSock (@GreenSock) on CodePen

 

Link to comment
Share on other sites

@OSUblake

 

Is there a way to do a before state with the toggle class? Other wise the class is added way too late.

Link to comment
Share on other sites

What do you mean by a before state? And what do you mean by too late? The class will toggle exactly at the point shown on the markers.

 

And getting back to your original question, it console logs out the correct values. The false one is the section leaving, and the true below that is the new section.

 

image.png

 

Link to comment
Share on other sites

@OSUblake

I would like to set a class on the section that I am leaving during the transition. like a inprogress class. The section im leaving does not output the correct value thats shown in the console log. if I do a console.log on the section it shows isActive: false on the isActive value, however if I do a section.isActive in my console.log it shows the value of isActive set to true

Link to comment
Share on other sites

4 minutes ago, JeremyLove said:

if I do a console.log on the section it shows isActive: false on the isActive value, however if I do a section.isActive in my console.log it shows the value of isActive set to true

 

I already discussed that several posts above. The object in the console has already changed by the time you inspect it. You should not be logging out the section to check for isActive. section.isActive is the value when that function was called. 

 

image.png

 

But that function is being called by different ScrollTriggers. The false value you see there is from a different trigger than the true below that.

 

Instead of toggling a class, why don't you just do a gsap animation instead?

 

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