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

nerve-racking stuff!

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

 

 

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

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

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

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!

 

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

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?

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

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!

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

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.

[Is there a codesandbox react gsap starter template?]

16 hours ago, Rodrigo said:

What exactly is not working on Stackblitz? Everything seems ok on my end 🤷‍♂️

Yeah I dont know. Nothing on Stackblitz loads for me. No errors or anything, it just sits there with a blank screen trying to load something. This isnt GSAP specific, but the entire Stackblitz site. Its not critical as codesandbox seems to work fine.

[Is there a codesandbox react gsap starter template?]

OK I think I figured it out. Wasnt as complicated as I thought...

 

https://codesandbox.io/p/sandbox/react-gsap-starter-template-y8z5hd?file=%2Fsrc%2Findex.js

[Is there a codesandbox react gsap starter template?]

Hi guys

 

Stackblitz is not working for me for whatever reason, but codesanbox seems fine. Is there a react gsap starter template for codesandbox somebody can point me to please, or briefly describe how I can set one up please?

 

[Scrolltrigger struggles: 2 X scrolltriggers back to back]

58 minutes ago, akapowl said:

Then logically you'll need to make sure that your video is appearing on the page further up than it is now.

You could e.g. calculate the distance it takes to scroll from when the 4s start fading out in your one ScrollTriggger until the point where your video enters the viewport now and then you'd know by how much you'd have to offset your video to the top for it to enter the viewport when the 4s start fading out. And this you'd have to of course do before you set up your ScrollTriggers for the video.

Or - since your airpods Scrolltrigger is dependent on the window height anyway - just set a vh value that fits for you via CSS, e.g. via a negative margin-top on your video container. That is what I did in the codepen below. A bit of a warning though; keep in mind that since you have a numerical scrub on your airpods scrollTrigger, the scroll of the video and the fading out of the 4s will never be truly 'synced' - which will become more apparent when you scroll fast.

 

 

You are adding the tweens for the fading of the video to your first timeline - which has a scrub set.
I'm not sure if that is what you want to begin with, since you added the tweens at the very bottom of your JS after you created all the ScrollTriggers.

And if you add it to the pinning Scrolltrigger like you do, of course it will only start fading in the opacity once the video has reached the top, and then the 'over-scrolling' you were trying to achieve wouldn't make any sense at all anymore.

So you'll probably want to add the tweens to that other, non-pinning, ScrollTrigger instead and also set it to scrub.

That out of the way, here's something from the article on the most common ScrollTrigger mistakes:
 

https://gsap.com/resources/st-mistakes/#how-to-make-scrub-animations-take-longer

------

BTW - @GreenSock @Rodrigo @Cassie - there's a wrong link in that blue information box in that section of the article.

It is an old URL which previously pointed to this content:
https://gsap.com/docs/v3/Plugins/ScrollTrigger/#how-does-duration-work-with-scrub-true

But although the general concept of how durations work with scrubbed: true is explained there, there isn't any mention of empty tweens as suggested in that blue information box - sort of confusing altogether.

Edit:
I also found a typo in the docs for the position parameter with regard to percentages, that I'm mentioning further down the post. Reporting it here, where it might be better to catch.
 

-----

That second link explains how durations work with scrub: true, @newguy123  - you should have a thorough read on it to understand the concept.

I added some comments in the codepen below that might help better understand it in combination with what the docs say.

In that codepen I also make use of the aforementioned empty tween to create a 'gap' where nothing happens between the fading in and fading out.

So I also got rid of your approach with the position parameter - of course you can do it with the position parameter, too, but you'd have to use the proper value - and for understanding how durations work with scrub: true to begin with it might be easier to work with empty tweens at first.

Also, I'm pretty sure the value you use for the position parameter (i.e. "99%") again is invalid.

Here's what the docs say with regard to percentage values in the position parameter. You see, a percentage value without any prefix is not listed in there. In your example you could in fact change it to "0%" and it would still behave exactly the same as it does now.
 

https://gsap.com/resources/position-parameter/

That all said, here's the codepen.

 

 

Thank you, this information is absolutely golden!!!

 

Most of what you say makes sense, and I've adjusted the last timeline for the fading duration to be 0.5, 3, 0.5 respectively and that makes it fade in and out faster, while having the full blank tween visible longer, which is great.

 

Now only 2 things I dont fully understand, and that is:

1)

the bit you mention that when scrolling fast, things might not always be in sync between where the video is suppose to start. Is that mainly because we are dealing with more than 1 scrolltrigger, or why? Any way to lock it in place so no matter if you scroll fast or slow, it appears where it should?

2)

You're adding id's into each of the video's scrolltriggers. Does that do anything, or its mainly for us as devs to keep track of which scrolltrigger does what?

[Scrolltrigger struggles: 2 X scrolltriggers back to back]

Awesome thanks @akapowl

 

For the video, as per your suggestion, I added the 2nd scrolltrigger for the video to make it play automatically at a different time, than what its container reaches the top of the viewport. This works great.

 

I like the way AAA and BBB scrolls past, over the video in usual fasion, so that part is great also.

 

The next bit of my troubles, are that I want the entire video (ie both scrolltriggers for the bunny video), to come in slightly earlier in the scroll. Currently the Airpods scroll completes, and after it is done, it scrolls out of view and the video scroll in. It would be great, if I can have the video coming in already, at the part where the Airpod's title "4444444" starts fading out. I can't figure out how to do this and seems the video will always only come in AFTER the Airpods scroll fully completes.

 

Also, I adjusted the video scroll some more, to also fade in and fade out. The problem with this part is that my initial fade in, seems to take too long. No matter what I set the duration to, it doesnt seem to make a difference.
For the fading out part, same thing, it takes too long to fade out. Also, it start to fade out too soon. I only want it to start fading out when "BBB" is almost out of view, but before "The End" comes in.

 

See the Pen dyLpxqp by newguy123 (@newguy123) on CodePen

 

 

[Scrolltrigger struggles: 2 X scrolltriggers back to back]

11 minutes ago, mvaneijgen said:

Take a look at your start and end triggers. Instead of video.play() and .pause(), console.log('onEnter has fired') and check the console if what you think should happen is happening.

 

For the stacking of element and then animating check my post of creating a stacking card effect, but in stead of cards you have a video and two pieces (or three) of text. 

 

Hope it helps and happy tweening! 

 

To be honest I dont know what is going on here.
For example, if I simply change the scrolltrigger code from a timeline like so:

var tl1main = gsap.timeline({
    scrollTrigger: {
      trigger: "video",
      start: "top bottom",
      end: `+="200vh"`,
      markers: true,
      pin: "#video",
      onEnter: () => video.play(),
      onLeave: () => video.pause(),
      onLeaveBack: () => video.pause(),
      onEnterBack: () => video.play(),
    }
});

and change that to:
 

ScrollTrigger.create({
    trigger: "video",
    start: "top bottom",
    end: "bottom top",
    markers: true,
    pin: "#video",
    onEnter: () => video.play(),
    onLeave: () => video.pause(),
    onLeaveBack: () => video.pause(),
    onEnterBack: () => video.play(),
});

then the video playes fine, however for some odd reason the video is only 1 pixel in height then, and its still not pinned

[Scrolltrigger struggles: 2 X scrolltriggers back to back]

Hi Guys

 

I have 1 X Scrolltrigger, ie the Apple Airpods example, with 4 titles appearing over it as you scroll. This works great, as expected.

 

However, immediatly AFTER the 1st scrolltrigger finishes, I want the next one to start as it come in to view. Its a video and it should loop and only start playing when it comes into view. What's more, I want the video to STAY PINNED for a bit, enough for the next 2 titles "AAA" and "BBB" to scroll past. Then the video should unpin scroll out of view while the next section "THE END" scrolls into view.

 

I have 2 troubles here. I can't seem to pin the video and I cant seem to play it when it comes into view, while the 2 titles scrolls over while the video is pinned.

 

 

See the Pen NWmReyM by newguy123 (@newguy123) on CodePen

[Scrolltrigger Airpods Pro type site - hosting question / advice please?]

Hi Guys

 

This is more of a general hosting question, and not so much necessarily a GSAP specific question. We built a site based on the GSAP Airpods Pro scroll sample. Our site however loads around 900 frames, and not 147 like the Airpods example.

Now the problem. We tested on 2 different hosting providers. The one provider, loads the files just fine, but the other comes up with a bunch of 508 and 404 errors, even though the files are there. In contacting the hosting provider support, they say there is nothing they can do as their servers are setup with brute force attack protection. Essentially when loading the site, its pulling so many resources that the server thinks its being attacked, and then blocks the requests, resulting in only half the site loading.

 

This is specific to a single hosting provider, and as I say, a different hosting provider does not have this probem at all. Unfortunately the provider that works fine, is not in UK, and we would need one based in the UK.

 

Any recommendations or general advice?

 

[Question - 2 overlapping Scrolltriggers with scrub, each with it's own pin - possible?]

Hi

 

I have 2 scrolltriggers with image sequence, currently the 2nd one only start scrubbing, when the 1st one finishes. Each one is pinned with text scrolling over it in a timeline.

 

However, is it possible to shift UP the 2nd one, so it fades in over the 1st one, while each maintains its own pinning?

 

In my image it probably illustrates it better. The one on the left, is how I CURRENTLY have it. The 1st blue Pin represents the full browser window. As the blue scrolls to the end, the 2nd scrolltrigger, the green one starts and is pinned in its green section. However, I want to change it so that things work more like the DESIRED image on the right, ie, when I get to almost the last bit of the blue scrolltrigger, the green one fades in, is pinned, and scrubs its context. ie.

The problem I'm having is how to work out how to move the 2nd scrolltrigger up a bit, so it starts over the previous one, instead of after it.

[ScrollTrigger - Initial AUTO SCROLL - Strategy question]

Thanks Helper

 

To answer my own question then, yes seems my thought strategy works perfectly fine in this simple pen. Is there any reason NOT to do it like that, or simply, if it works, it works!?

See the Pen VwROdVN by newguy123 (@newguy123) on CodePen

[ScrollTrigger - Initial AUTO SCROLL - Strategy question]

Hi Everyone

 

If I want my Scrolltrigger, to 1st auto scroll a bit, could I simply add in a label at the point I want it to autoscroll to, and then simply add some code like this:

 

gsap.to(window, {
	scrollTo: tl.scrollTrigger.labelToScroll("mylabel"),
    duration: 1,
});

... and I dont need a click or interaction for that to work correct, and it will simply run and scroll to that label as soon as the page loads?

 

[ScrollTrigger z-index issue]

59 minutes ago, Rodrigo said:

Hi,

 

The last demo you posted was never going to work because you didn't read my post carefully:

The key is fixed position, that takes the element out of the document flow. Again this is basic HTML/CSS  stuff every developer must know in order to create UIs in this business and not a GSAP related specific problem.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/position

 

Hopefully this clear things up.

Happy Tweening!

No things are not cleared up for me unfortunately. I was under the impression I did exactly what you asked. IE, I took the text out and stuck it directly in the body. Each id #section number position is fixed as you can see in the css. To make double sure, I've also set the the class of the one I'm targeting, to fixed. However, its not fixed for some odd reason.

 

EDIT: Ah I see what the problem was. I set the position as fixed, but then further down, in same tag, I set it to absolute, effectively overriding the 1st fixed.

It is fixed and also 'fixed' now LOL. Thanks for the hint!

[ScrollTrigger z-index issue]

Just now, mvaneijgen said:

You pin #container, so only things inside container will pin. You either have to make this part of #container or use another element as the pin that contains everything you want to pin. 

herein lies the problem. If I make the text part of the container, then I CANT adjust different text element's z-index. I want some titles in front of the canvas, and other behind. Is there no way of doing this? Can't GSAP somehow adjust z-index inside a timeline, or perhaps using a flip in the timeline to adjust the z-index?

[ScrollTrigger z-index issue]

55 minutes ago, Rodrigo said:

That's basically how HTML/CSS work, nothing to do with GSAP unfortunately. If the container of the texts container is above the canvas there is no way to put anything inside that container below the canvas element. The only way is to keep each text in the body tag with a fixed position and play with each text's z-index value, but again that is mostly an HTML/CSS thing rather than a GSAP one.

 

Hopefully this helps.

Happy Tweening!

I took it out of the container as per your suggestion. I limited it to only 1 title for now and I managed to get it behind the canvas.
However I can't seem to make the TL work with that single title now as it just seems to be a rugalar scroll element now, it doesnt stick to it's position, and the TL I gave it seems to do nothing...

I would expect it to fade out from around frame 80

 

EDIT: here the codepen

See the Pen Babeogr by newguy123 (@newguy123) on CodePen

[ScrollTrigger z-index issue]

I'm not sure if this is a GSAP issue, or simply a logic issue. Either way, I'm hoping somebody could help me solve the issue please.

 

I have a simple image sequence, with 4 titles coming up over time as you scrub scroll.  The #container z-index is a 2, to be above the canvas image sequence. However if I want to be able to have 1 of the titles, say title 2, behind the canvas, then that title's class of .below seems to do absolutely nothing, even if set to -9999.
If however I set the container's z-index to -9999, then ALL the titles do in fact go behind the canvas. But of course that doesnt solve the problem.

 

I also tried cheating, by setting each target's zIndex in the tl, but that also doesnt seem to do anything. It appears that anything inside the container, is linked to the container's z-index, which is a bit of a bummer of that is the case!

Any ideas?

 

See the Pen PoLvqRw by newguy123 (@newguy123) on CodePen

[Multiple ScrollTrigger Image Sequences - Strategy question]

Hi

As per the Apple Airpods example on GSAP, which currently only shows 1 image sequence in the example, what if I want to have 3 or 4 sections, each with its own sequence?

Do I simply duplicate the existing code for the single section, and just rename the classes/ids in html for each section, and same in the javascript?

Ie, I will then have 4 different scrolltriggers, each firing when its relevant section reaches it's start?

[ScrollTo issues - possibly visibility issue or z index?]

As mentioned further up, this works fine, in codepen at least and I get no issues in console.

 

IF HOWEVER, I duplicate the entire thing, ie copy the code from codepen to my local dev envirment, it also works, however, GSAP is throwing an error in the console:

Any ideas?

 

EDIT: Sorry nevermind, it was a function from a previous step I left in and forgot to delete

All good now!

[ScrollTo issues - possibly visibility issue or z index?]

14 minutes ago, mvaneijgen said:

Keep in mind that all this is CSS and has nothing to do with GSAP. A firm understanding of CSS is really important when starting to make more and more complex animations.

 

Maybe in this case visibility: hidden; is better because the browser handles the element differently. https://developer.mozilla.org/en-US/docs/Web/CSS/visibility this is what autoAlpha sets under the hood (in tandem with opacity)

 

You'll have to view the web page as a 3D object and all your buttons are a stack of paper and if you click on the front most one even if it is not visible you still click on the object on front. Also highly advise to test this in multiple browsers because I have the feeling some browser might handle this differently and if that is the case you might also have to set the z-index to 'physically' move it to the back if you don't want people to click on it, otherwise the button you click on is blocking the once behind it. This you can all debug, by logging the element that is being clicked on and see if that correspond with what you think is being clicked. 

To that effect, in addition to autoAlpha, I think I will then in that case set the starting z-index to -1, and the 1st to tween z-index to 9999 to make sure that title and button is on the top, then on the fade out tween, I'll set the z-index back to -1,  and also MOVE the entire thing y: -500, just to make sure only the 'CORRECT' button is both visible and also clickable.

 

 

Does that sound like a good plan?

[ScrollTo issues - possibly visibility issue or z index?]

5 minutes ago, akapowl said:

Why would I be lying about what I said or intentionally give you advice that I don't think will help!? 😂
 

Might just be me, but I think a button either works or it doesn't; not sure what you mean by 'it almost works'.

The reason it sometimes works for you with opacity - and other times doesn't - is probably related to elements with an opacity of 1 having a different stacking-context than elements with any other opacity but 1, e.g. 0 or somthing in between like 0.857694857; that also pretty much correlates with what I explained in the post above; about being on scroll-positions in between.

That is a browser thing - nothing related to GSAP in any other way.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

So when you're right on spot and an element's opacity is at 1 exactly - it will appear above all the other elements that do not have that opacity of 1 and thus it will be perfectly clickable. But if all the elements do not have an opacity of 1, they will all share the same stacking-context, and since the last element sits on top of all other elements z-wise within that stacking context, this element and no other will be clickable in those cases.

Does that make sense to you?


 

I was confused for a sec, since as I say I did try autoAlpha before I posted, but when I tried again, after reading your post, it 'magically' started working. Perhaps 1st time around I had a typo.

 

Yes your explanation of opacity makes perfect sense, thank you. That's why autoAlpha is such a blessing in this case it seems as I dont have to worry about other elements having opacity 1 or near 1 etc.