Gallery Grid width animation and miscalculation after resize?

[emjay]

Hello,

 

i have made a pen from a little problem that occurs when resizing. Take a look at the attached gif. Everything works when the page is loaded initially. If you enlarge the screen a little bit there will be a space added between the images when you scroll up a bit. Is this in a problem with savestyles?

 

Maybe someone has have a hint how I can avoid this. :)

 

Thanks

emjay

See the Pen 3b8bb469884c1b983480ec4786c97c9c by emjay (@emjay) on CodePen

[ZachSaucier]

Hey Emjay. This behavior is simply because ScrollTrigger waits a bit after resizing to set things up again (refreshing). Otherwise every single resize event (there are a lot when someone resizes the window like that) it'd start setting things up then have to tear everything down and re-set things up again. That's quite bad for performance. So ScrollTrigger optimizes things by not refreshing as much as the resize event fires (which is a good thing!).

[emjay]

Hello @ZachSaucier,

 

i totally agree with you and understand the refreshing concept, but the problem is a different one I think, because the resizing is finished.
The animation works, but when I scroll up again, a wrong value is set inline, see my video for a little bit more detail.

 

As you can see I scroll up and down several times, and scrollTrigger always adjust the values until finally a px value of 543,933px is set. Then I make the viewport a bit narrower and it looks good at first, but suddenly the old value of 543,933px is set, although the window is narrower now. This finally leads to the element wrapping to the next line.

 

I think a wrong value is kept. I tried to refresh scrollTrigger but this wasn't changing the behaviour.

 

Thanks for your Feedback in Advance,

emjay

[ZachSaucier]

Ah, I understand what you're saying now @emjay. Something funny is going on there. We'll investigate and get back to you!

[GreenSock]

When a tween renders for the first time, it records its starting and ending values internally so that it can very quickly interpolate between them during the course of the tween. You've got your animation set up to animate the width to 33% or 66%, but the browser always reports the current (computed) values in px, so the starting value would be in px. Let's just say that's 543px...

 

...when you resize, it doesn't throw away that entire animation and recreate it - it merely adjusts the progress accordingly. So when you rewind all the way to (or past) the start, the initial values get re-applied (as they should). So from what I can tell, this isn't a bug - it's just a logic issue related to your particular scenario. If I understand your goal correctly, you can just set invalidateOnRefresh: true on your ScrollTrigger which will cause it to flush out those recorded starting values on refresh and re-record them on the next render. 

 

Does that resolve things for you? Does it kinda make sense? 

 

We don't force things to invalidateOnRefresh by default because in plenty of scenarios that might be undesirable. It just so happens that your scenario is an ideal candidate for invalidateOnRefresh: true functionality. 

[emjay]

Good Morning @GreenSock,

 

Thanks for the background information on how everything works. I have now gained some more useful insight into ScrollTrigger. With the settings you recommended, the problem described above has disappeared.

 

Thanks for your great help as always.

 

Maybe you could think about adding this setting to your Greensock Cheatsheet. But maybe this is already too special a setting.

 

Have a nice Day!

emjay