ScrollTrigger onUpdate callback function has self.progress value 0 on page load

[Milenoi]

Hi, 

i have a simple ScrollTrigger on my page which does some scrolling magic on its onUpdate function with another elements, using the self.progress values. 

My Page is very long. I realized that - when i reload my page and it starts in the beginning not on top (this is natural browser behaviour, nothing i should control) -  but somewhere in the middle of the page- that my animations do not work properly. The self.progress is sometimes 0, not as expected 0.78899 whatever (depending the position my browser reloads). Sorry it is a little bit hard to explain. But did anyone notice similar behaviour?

 

When i put the ScrollTrigger in a setTimeout function it works as expected but i thinks this is not a good way to solve this. 

 

 

window.addEventListener('load', (event) => {
    ScrollTrigger.create({
      trigger: '.bar',
      endTrigger: '.footer', // user has scrolled to the end of the page
      start: 'top top',
      end: 'bottom bottom',
      toggleClass: 'sticky',
      onUpdate: (self) => {
          console.log(self.progress);
      }
  });
});

 

See the Pen WNjjNzK by milenoi-the-sans (@milenoi-the-sans) on CodePen

[OSUblake]

Can you try the latest version, 3.7.1? It was just released a couple of hours ago and has some fixes in it that might be related to that.

 

If that doesn't work, then a minimal demo showing the issue would be really helpful.

[Milenoi]

Hi OSUblake, 

 

i updated as you suggested, but the problem did not disappear  

 

I Added my codepen.  You have so scroll to the end oder in the middle of the page and then reload. Bar is SOMETIMES not sticky. 

 

Thank you!! Milenoi

[GreenSock]

Yeah, that isn't a bug (from what I can tell) - it's an interesting edge case where you're altering the entire height of the page and shifting around the layout by applying your toggleClass which has a trickle-down effect. So let's just say your ".bar" element is 100px tall and it's in the normal flow of the document, thus it pushes the things under it down by 100px (to make room for itself). Cool. And when ScrollTrigger calculates all the start/end positions, it does so accordingly (with that element in the document flow). Let's assume it marks the "end" of the ScrollTrigger at 2000px just to make it simple...

 

...but when you add the "sticky" class, you're actually removing the element from the document flow by using position: fixed, thus everything collapses and shifts up by 100px. The page is now 1900px tall, not 2000px. But the "end" value is still at 2000px which is why when you scroll down, it never actually reaches the "end" (the page can't scroll beyond 1900px now). 

 

Normally, though, at 2000px that'd be at the "end", thus the class would toggle back OFF (no more "sticky"). When you scroll all the way down and then refresh, the newly-refreshed page is indeed 2000px tall because that element hasn't been removed from the document flow and since it's at the very end, that ScrollTrigger's progress is 1, thus the class isn't supposed to be added. This all works properly. The only reason it SEEMS weird is because when you start higher up on the page and then scroll down, you're toggling that class which makes the entire page shorter and you can NEVER get to the end (2000px). But on a refresh, you can because the class hasn't been toggled and the element is in the document flow. 

 

One solution would be to edit the "end" so that it's higher up, like end: "bottom bottom-=100". I'm looking into another potential solution but that may take some time. 

 

[EDIT: the other potential solution didn't turn out to be viable.]

 

Hopefully this clears things up. 

[Milenoi]

I thank you for this competent and detailed explanation!

 

I am really impressed with the helpfulness of this forum.

 

I've implemented the suggested solution and it seems like that solved the problem at least I couldn't reproduce it anymore.

(end: 'bottom bottom- = 10',)

 

Many thanks!