ScrollTrigger Resizing Issue

[akapowl]

Hello all.

I noticed some odd behaviour (at least to me it feels sort of odd) with ScrollTrigger when resizing.

 

As you can see in the pen below, there are those sections that have a ScrollTrigger-Pins and are being translated horizontally on scroll.

 

When I set the width of the items in those sections to an absolute value, like 960px, everything behaves as expected on resize.

 

When the items' width is set to a relative value though, like 50vw, on resize there are those jumps, that probably occur because ScrollTrigger adds or substracts the extra space to/from the pin-spacer and you get pushed down or pulled up on the page. This becomes visible when scrolling past the first horizontally translated section and making the browser window wider/narrrower - especially when viewing the section in between and doing the resize then.

 

Since this probably is a rather edgy scenario, is this sort of behaviour to be expected in this case?

And / or is there a workaround to still be able to use relative values for the width of the items?

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

[ZachSaucier]

Hey akapowl. This is the expected behavior because the start and end points of all of your ScrollTriggers change on resize in that case. ScrollTrigger retains the original scroll position (or at least as close to it as it can).

 

You could work around it by saving the percentage of the scroll on the page and using that position to set the scroll position after resize. Here's a way using a ScrollTrigger:
 

var pageST = ScrollTrigger.create({});

var progress = 0;
ScrollTrigger.addEventListener("refreshInit", function() {
  progress = pageST.scroll() / ScrollTrigger.maxScroll(window);
});
ScrollTrigger.addEventListener("refresh", function() {
  pageST.scroll(progress * ScrollTrigger.maxScroll(window));
});

The same thing using just the scroll position (no extra ScrollTrigger):

var progress = 0;
ScrollTrigger.addEventListener("refreshInit", function() {
  progress = document.documentElement.scrollTop / ScrollTrigger.maxScroll(window);
});
ScrollTrigger.addEventListener("refresh", function() {
  document.documentElement.scrollTop = progress * ScrollTrigger.maxScroll(window);
});

 

[akapowl]

Thanks @ZachSaucier.

 

In the example of my pen, your work-around works pretty good (except, it gives some flashes every now and then).

In my actual project, things are a bit more complicated though, since I am using smooth-scrollbar etc., so I couldn't get your solution running over there.

 

What really helped me, were those event-listeners. I had been trying to find a solution of my own before, but was only using a ScrollTrigger with the built-in callbacks onUpdate and onRefresh. That couldn't give me the result I wanted.

 

But with help of those event-listeners, I got to calculate the total height of all pin-spacers on refreshInit and on refresh and set the position on resize depending on the difference between those values.

 

[fede]

Hi,

I have this problem with resize too, am trying to apply this solution:

On 7/28/2020 at 1:09 AM, ZachSaucier said:

var pageST = ScrollTrigger.create({});

var progress = 0;
ScrollTrigger.addEventListener("refreshInit", function() {
  progress = pageST.scroll() / ScrollTrigger.maxScroll(window);
});
ScrollTrigger.addEventListener("refresh", function() {
  pageST.scroll(progress * ScrollTrigger.maxScroll(window));
});

I need the animation to stay at its very end even if window is resized. If I make the window taller it works, but if I make it shorter, the animation rewinds a bit. Somebody knows how to solve this?

 

This i s my demo:

See the Pen wvqGYmy by FedMann (@FedMann) on CodePen

 

Thank you in advance

[akapowl]

Hello @fede

 

I tinkered around with it a bit and found some sort of workaround.

 

This is what's causing the slight 'rewind' you mentioned:

 

If you compare the values of the refreshInit eventListener with a regular window-resize eventListener, you will notice, that the progress-value that is being used to store the scroll-position will be equal to the last value of the window-resize eventListener here...

 

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

 

 

 

...what you actually would need though, is the progress at the beginning of the resize.

 

For that, in the following example, I set up a ScrollTrigger, that spans across the whole page scroll and onUpdate updates a progress-variable, that is being accessed by a window-resize eventListener. That window-resize eventListener is set up with the timeout here, so it only gets the value of that triggerProgress when it starts resizing and not again until this sort of 'debounce' lets it again. And that initial value is what the page-scroll then will be set to in the refresh eventListener of ScrollTrigger.

 

See the Pen 2346730be31bad651ec333beb11d0fc0 by akapowl (@akapowl) on CodePen

 

 

 

I'm not sure if this is an ideal solution, but it appears to be working quite alright. You will still notice that the animation will slightly change in that exact scenario while resizing and after resizing up, but I'm not sure there is much you can do about that. At least the position will be the same.

 

 

[fede]

Hello @akapowl !

 

Thank you a lot for spending your time on it, this is the behavior I was trying to accieve!🥳

 

In my opinion this is the more logical reaction to window resize, the one I would aspect as a profane. At least in this senario, where we have one scroll-trigger across the whole page. I didn't immagine it woluld be necessary such a workaround😅

 

Anyway great, thank you again!