ScrollTrigger snapping and matchMedia

[akapowl]

Hey everybody,

 

I have run into a resize issue when using ScrollTrigger's matchMedia with triggers that have snapping applied.

On resize my page sometimes goes totally crazy, scrolling all over the place and ending up where I wouldn't suppose it to -- at all.

 

Unfortunately, I couldn't quite get to reproduce the exact issue in a reduced testcase yet, but when trying to do  that, I noticed some other behaviour in a scenario with matchMedia and snapping on resize.

 

 

 

 

In that pen, the sections are supposed to snap to the top of the window at window-sizes wider than 1200px - they totally do so - and not snap at all below that window-width - they totally do so. 

 

 

 

First thing I noticed, though:

When you resize the window below those 1200px width and resize it back up again (will call that resizeBack from here on), on every second resizeBack the sections snap into place correctly, on every other resizeBack there seems to be some sort of offset to it.

 

Note:  This only occurs when the resizeBack is happening on maximizing the browser into full window mode, but not when dragging it wider again.

 

 

 

Second thing I noticed:

When you are in full-window mode, and resize the browser into non-full-window-mode (below 1200px in this case) while the snapping animation is in progress it will break the snapping altogether. When resizing back to above 1200px there is no more snapping going on.

 

 

 

And the third thing (that might be related to my problem described above):

This again only happens when maximizing the browser to fullscreen.

 

Say you are in window mode and wider than 1200px here. Page loads.

You scroll down to the very bottom e.g., then resize the browser to full-window-mode.

 

After the resize happens, the position on the page is a totally different, which is to be expected, since the dimensions of the sections have changed.

But no matter where you end up after the maximize-resize ( this said with respect to the scrollposition before the resize ) the page will always scroll up to the very top.

 

 

 

In real life use, these things might be very seldom to occur, but when they do (especially the second and third) they can be rather annoying, I think.

If all this might be related to the way I set up the matchMedia function or the snapping after all, as always I'd be glad to get a push into the right direction.

 

Cheers,

Paul

 

See the Pen 670dcb1113691b7bdedb8b786913893f by akapowl (@akapowl) on CodePen

[ZachSaucier]

Hey Paul, thanks for writing this up.

 

12 minutes ago, akapowl said:

When you resize the window below those 1200px width and resize it back up again (will call that resizeBack from here on), on every second resizeBack the sections snap into place correctly, on every other resizeBack there seems to be some sort of offset to it.

By this you only mean the offset only occurs right after the resize, correct? I am able to reproduce that but if the user scrolls again it seems to work properly. Is that true for you?

 

13 minutes ago, akapowl said:

When you are in full-window mode, and resize the browser into non-full-window-mode (below 1200px in this case) while the snapping animation is in progress it will break the snapping altogether. When resizing back to above 1200px there is no more snapping going on.

I'm able to reproduce this as well. This occurs when going from "full-window mode" (CMD + CTRL + F on Mac) and from simply having the browser take up the full screen width (the double-click-the-browser's-top-bar full screen mode) in my tests.

 

21 minutes ago, akapowl said:

no matter where you end up after the maximize-resize ( this said with respect to the scrollposition before the resize ) the page will always scroll up to the very top.

I can reproduce this only with "full-window mode". For me it goes about half way up the page, not fully like you describe. 

[ZachSaucier]

In terms of the offset (issue 1): It seems related to the snap parameters. Using just snap: 0.2 I can't seem to get it to have the offset. The following doesn't have the offset but does jump to the correct value every other time:

snap: {
  snapTo: [0, 0.2, 0.4, 0.6, 0.8, 1]
},

Similar for issue 3 - it works better with just snap: 0.2.

[akapowl]

34 minutes ago, ZachSaucier said:

By this you only mean the offset only occurs right after the resize, correct? I am able to reproduce that but if the user scrolls again it seems to work properly. Is that true for you?

 

Copy that. When scrolling after the resize, the snapping works as expected.

 

 

 

34 minutes ago, ZachSaucier said:

I'm able to reproduce this as well. This occurs when going from "full-window mode" (CMD + CTRL + F on Mac) and from simply having the browser take up the full screen width (the double-click-the-browser's-top-bar full screen mode) in my tests.

 

I'm on a windows machine btw.

 

And yes, here it also happens on double click on browser-top-bar and when using the keyboard shortcut (Windows-Key + Arrow Up).

Any instant resize to full-size so to say.

 

 

 

34 minutes ago, ZachSaucier said:

I can reproduce this only with "full-window mode". For me it goes about half way up the page, not fully like you describe. 

 

I just noticed, sometimes it even just goes down a bit. Will have to test a bit more to find some consistency in this.

 

 

Edit: 

Tested with Windows 64-bit

 

As described, on:

Opera 69.0.3686.95

Firefox 79.0

 

Edge 84.0.522.59  - Same behaviour, except, the offset-thing doesn't seem to happen here, neither does it on

Chrome 84.0.4147.125

 

 

 

[akapowl]

 

53 minutes ago, ZachSaucier said:

Using just snap: 0.2 I can't seem to get it to have the offset.

 

The only change I noticed when using snap: 0.2 instead, was on Chrome for the third case. It didn't scroll up to the top but seemed to do properly be snapping to the respected section.

 

[GreenSock]

I had a super difficult time reproducing these issues, but it did lead me to find a scenario where the matchMedia() function could get called multiple times (thus duplicate ScrollTriggers might be created). I believe I fixed that in the latest beta - would you mind testing that to see if it resolves anything for you related to the issues you were describing above? 

 

https://assets.codepen.io/16327/ScrollTrigger.min.js

[akapowl]

 

Thanks for the update on this @GreenSock

 

Unfortunately, using the latest beta did not change anything related to the issues mentioned above (tested with Firefox and Opera for now).

[akapowl]

 

I noticed one more thing, though.

Since this one might be sort of hard to reproduce too, I will upload a screencast to show what I mean.

 

 

 

 

When you start off on full-window, resize down to below 1200px width, then scroll to the very bottom of the page, on resizeBack it will snap to the mentioned offset first and then, when it reaches that, it will snap to the actual position.

 

Maybe this somehow helps in closing down on what might be triggering the issues.

 

[GreenSock]

I simply cannot reproduce this. I've probably tried 50 times. Windows, Mac, Chrome, Edge, Firefox...NEVER does what you showed

 

Do you maybe have an extension installed that might be causing the odd behavior? 

[ZachSaucier]

I'm no longer able to reproduce #1 and #3 (I can still reproduce #2). What Chrome version are you in @akapowl? Do you have an update available?

[akapowl]

That's really odd - for me they still all are reproducable.

 

I just tried on Firefox 79.0 (latest) with all my extensions/add-ons removed (not just disabled).

 

Also before I had only updated the ScrollTrigger.min.js to the latest beta - this time around I tried with additionaly gsap updated to gsap-latest-beta.min.js - nothing changed - cache cleared and all.

[GreenSock]

After probably 100+ attempts, I still cannot reproduce issue 1 or 3 on any devices even once, so I'm not sure what else I can do there, but I believe I did fix #2. Please give the latest beta a shot (clear your cache): 

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Thanks a bunch!

[akapowl]

 

Yess! Issue #2 seems to be fixed. The snapping-functionality continues on after resizeBack now. Awesome job @GreenSock

 

On the other issues:

I really appreciate you going the extra length of trying over and over to reproduce this, although it simply just doesn't appear for you.

And I understand, that there is not much you can do if you can not even recreate what I am experiencing.

 

Just to be sure that any of that behaviour is not related to my computer's configuration, I checked on another windows machine and with a different mouse, and I was able to reproduce it all in the exact same way. Also, I made a screencast for each of the issues, just to make sure, I am not crazy or something 😋

 

 

Issue #1:

 

 

 

Issue #3:

 

 

 

Regarding issue #3:

From second 00:17 on in the screencast, you can notice, that the issue also appears the other way around - when going from full-window to windowed-mode - but it scrolls/snaps to the end of the page in that case there.

 

 

It just boggles my mind, that you can not reproduce this at all.

 

Edit:

On another PC with Windows 7 and Firefox 79.0 (latest) I was able to recreate issue #3 but not issue #1 - weird.

 

[ZachSaucier]

Thanks for the videos.

 

I can reproduce #1 and #3 with 3.5.0 and the latest beta files in Chrome (and Brave) on Catalina. 

 

I can reproduce only #3 in Safari and Firefox.

 

So it appears that the two issues are not necessarily related like I initially thought.

[GreenSock]

@akapowl we've become aware of some very strange CodePen behavior related to the reporting of window sizing that seems to only affect certain systems. Apparently it's completely unrelated to GSAP/ScrollTrigger. It's a CodePen thing.

 

Can you please try to recreate the issue OUTSIDE of CodePen? Like...just a local file? 

 

Thanks a bunch. 

 

FYI, 3.5.1 is officially out with some of the fixes you helped with, so feel free to update. 🙌

[akapowl]

 

Sure, anything that might help with this @GreenSock

 

I moved the setup into a local folder, and unfortunatelly was able to recreate the issues across Browsers, just like mentioned in a post above

(except that issue#2 is fixed now, of course)

 

On 8/17/2020 at 10:52 PM, akapowl said:

As described, on:

Opera 69.0.3686.95

Firefox 79.0

 

Edge 84.0.522.59  - Same behaviour, except, the offset-thing doesn't seem to happen here, neither does it on

Chrome 84.0.4147.125

 

 

I attached a .zip of the folder for reference.

 

 

GSAP matchMedia Test.zip

[GreenSock]

Thanks @akapowl. Still completely unable to reproduce it anywhere.

 

Oh well.