Can somebody show me any example of the .isScrolling() Method in a Scrolltrigger please

[newguy123]

Hi Guys

 

In the docs for Scrolltrigger here: https://gsap.com/docs/v3/Plugins/ScrollTrigger/

...there is mention of this Method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isScrolling()

 

if (ScrollTrigger.isScrolling()) {
  // do something if scrolling
}

Would I stick that if statement inside the Scrolltrigger code, or it would be outside of it?

Also I want the opposite, I want to do somewthing when its NOT scrolling or between scrolls when the scrolling has stopped when the user is not swiping or scrubbing the scrollwheel, so would that simply be:

if (!ScrollTrigger.isScrolling()) {
  // do something if NOT scrolling
}

?

 

It would be great if somebody can show me a very simple example example of any scrolltrigger, with console log "not scrolling" between scrolls so I can understand how to use it please.

[akapowl]

 

1 hour ago, newguy123 said:

Would I stick that if statement inside the Scrolltrigger code, or it would be outside of it?

Hey there.

I'd say typically you would want to call it in any type of event when you'd need to know whether or not something is scrolling at the time that event gets dispatched - like a 'click' event or anything else imaginable.

If you'd want to know whether or not something is scrolling at any given point in time, you'd of course need something that gets dispatched/called at any given time. You coulnd't for example call the method in a 'scroll' event listener, because then of course nothing would get called if you don't scroll at all.

What does run all the time in the background with GSAP is the ticker - it's sort of GSAP's heartbeat/pulse.
So adding a function with your logic to the ticker would allow you to get that 'not scrolling' information at any given time.

https://gsap.com/docs/v3/GSAP/gsap.ticker()/

See the Pen qBwzpBP by akapowl (@akapowl) on CodePen

 

 

Depending on what exactly you're up to with this, you might want to also consider having a look at ScrollTrigger's 'scrollStart' and 'scrollEnd' events, that may or may not be suited better for your usecase with regard to performance, as you won't be calling something on every tick, but only at specific events.

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()/

Here's a rather minimal example for those from an older thread. I hope that will help. Cheers.

 

 

[newguy123]

48 minutes ago, akapowl said:

 

Hey there.

I'd say typically you would want to call it in any type of event when you'd need to know whether or not something is scrolling at the time that event gets dispatched - like a 'click' event or anything else imaginable.

If you'd want to know whether or not something is scrolling at any given point in time, you'd of course need something that gets dispatched/called at any given time. You coulnd't for example call the method in a 'scroll' event listener, because then of course nothing would get called if you don't scroll at all.

What does run all the time in the background with GSAP is the ticker - it's sort of GSAP's heartbeat/pulse.
So adding a function with your logic to the ticker would allow you to get that 'not scrolling' information at any given time.

https://gsap.com/docs/v3/GSAP/gsap.ticker()/
 

 

 

 

Depending on what exactly you're up to with this, you might want to also consider having a look at ScrollTrigger's 'scrollStart' and 'scrollEnd' events, that may or may not be suited better for your usecase with regard to performance, as you won't be calling something on every tick, but only at specific events.

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()/

Here's a rather minimal example for those from an older thread. I hope that will help. Cheers.

 

 

Thanks your pen example seems to be what I'm looking for. So in a react example, that gsap.tick bit I would just add together with the if statment into my useGSAP hook correct?

 

I'll tinker around a bit over the next few days and come back here if I get stuck. Thanks again!

[akapowl]

16 minutes ago, newguy123 said:

So in a react example, that gsap.tick bit I would just add together with the if statment into my useGSAP hook correct?

Not sure - but that is something you can easily test yourself.

I just did, and it looks like you'll have to do some 'manual' cleanup for the ticker bit. When just adding it to the useGSAP hook, it didn't get removed automatically for me when changing routes. So you'll probably want to do something like this.
 

  const container = useRef();

  function test() {
      if (ScrollTrigger.isScrolling()) {
        console.log('scrolling');
      } else {
        console.log('not scrolling');
      }
  }

  useGSAP(() => {
    
      gsap.ticker.add(test)
    
      return function() {
        gsap.ticker.remove(test)
      }
    
  }, { scope: container });

I'm no React expert though. But if the above is blatantly wrong, I'm sure someone will step in to correct me.
 

[newguy123]

On 5/3/2024 at 3:07 PM, akapowl said:

Not sure - but that is something you can easily test yourself.

I just did, and it looks like you'll have to do some 'manual' cleanup for the ticker bit. When just adding it to the useGSAP hook, it didn't get removed automatically for me when changing routes. So you'll probably want to do something like this.
 

  const container = useRef();

  function test() {
      if (ScrollTrigger.isScrolling()) {
        console.log('scrolling');
      } else {
        console.log('not scrolling');
      }
  }

  useGSAP(() => {
    
      gsap.ticker.add(test)
    
      return function() {
        gsap.ticker.remove(test)
      }
    
  }, { scope: container });

I'm no React expert though. But if the above is blatantly wrong, I'm sure someone will step in to correct me.
 

This is working awesome in this basic form. However, how can I adjust the gsap.ticker test function on the else to run only 1 time with each not scrolling, instead of each frame while its not scrolling, similar to a scrollEnd event?

Reason being I want to load a function based image to a canvas when not scrolling, but currently the image is being loaded on EACH frame when not scrolling, so the server is being hammered by image requests when not scrolling.

 

I also tried using:

ScrollTrigger.addEventListener("scrollEnd", StillFrame);

...which adds the image, but then when I start scrolling again, the part in the isScrolling that removes the image, never gets called.

 

EDIT:

I've now ALMOST go it to work by both using the gsap.tick with isScrolling, and also isScrolling with scrollEnd. I then split the code from the ticker else and move that to the scrollEnd instead. Then things work 90%

The last bit now that is an issue, is that my scrolltrigger has:

scrub: 2,

...and with that the scrollEnd event listener falls apart a bit, as it fires as soon as I stop scrolling, even though there is suppose to be that smooth transition with extra few frames from the scrub set to 2 instead of simply setting scrub to true. Any idea how to overcome this with scrollEnd event?

[newguy123]

I think I got it to work finally... pending further tests!

 

I removed the scrollEnd event listener, and went back to just the gsap.tick. Then I simply introduced a temporary placeholder variable that stores the last image. Then, when the isScrolling if else runs, in the else part I simply compare the current image with the previous image and if they're the same, do nothing, otherwise load the new image. This seems to work great, pending furher tests to see if it has an impact on performance, memory etc, but its looking good so far!

 

[newguy123]

spoke to soon!

 

If I disable the markers, the browser scrollbar disappears asif I only have content 100vh and thats it and no scrolling.

Very weird! First time I see such behaviour

[newguy123]

nerve-racking stuff!

just had to add pin: true and now when I remove markers, it works as expected

 

 

[akapowl]

 

1 hour ago, newguy123 said:

just had to add pin: true and now when I remove markers, it works as expected

Well, I'm glad you figured that one out already 🥳

Let me just give you a quick tip for navigating this forum, that likely applies to other places, too, whereever you seek help/support with something:

Whenever you feel stuck on something, something is bugging out for you or just not working the way you would expect it to behave from the information you got from the documentation or maybe another forum post, try getting into the habbit of creating an isolated demo - reduced to the bare minimum neccessary for that part you're having troubles with - no matter how relevant or irrelevant you think it might be.

Having something that clearly shows your approach and allows others to tinker with it themselves, will make it much easier for others to help you. I woulnd't even have known where to start guessing with regard to your problem with the markers, because e.g. I didn't have that crucial information about you pinning something, to begin with.

Also, in isolated scenarios you will make it much easier for yourself to tinker around with your problem, as seeing through the weeds of convoluted logic often times makes you miss the small details that can be very much relevant for things to work properly. You'll even find the problem yourself more likely then, before even thinking about posting your question - which of course also is beneficial for others as they won't get 4 notifications within 2 hours 😉.

I hope you don't take this the wrong way, it's not meant to be condescending or something - just a little piece of advice. I see you put in looots of effort yourself into learning all the ins and outs of the tools GSAP has to offer, which is great to see 💪



Now with regard to your scenario - as I already mentioned, since you didn't include a demo of it so far, it's really hard to give you any solid advice.
All in all it sounds like what you're having most trouble with is the logic wrapped around what you're trying to achieve with GSAP / ScrollTrigger.

An idea to work around your issue with the numeric scrub, could be to set up a page-wide ScrollTrigger and utilize its onScrubComplete callback alongside a ScrollTrigger eventListener, to toggle a boolean variable that keeps track of the scrolling 'state'. That page-wide ScrollTrigger would need to be attached to an animation of some sorts though (it is an empty tween in my demo below), or else the onScrubComplete wouldn't fire - probably because internally the logic for scrubbing is heavily tied into tweens'/timelines' durations, which at least totally would make sense to me.

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#onScrubComplete

But again, I don't really have an idea whether or not that might be helpful for you, as I can't see or tinker with your actual approach/scenario and thus might be lacking crucial information - and in the long run, getting the surrounding logic right can be the most tricky part needing the most consideration, which might as well fall out of scope of the amount of help I can voluntarily offer. Maybe the above will be already be helpful though. I hope it is in one way or another.

See the Pen LYopzEG by akapowl (@akapowl) on CodePen