ScrollTrigger pin layout breaks on resize

[chungeric]

Hi,

 

I'm quite new to GSAP and am trying the pinning functionality out. But running into some issues when resizing the screen.

Resizing the screen seems to break the layout. It's most apparent if you scroll past the pinned section and resize.

 

I'm pinning a 100vh tall section, setting the end value to +=500%, and animating a timeline of absolutely positioned elements in the center of that section using scrub.

 

Just wondering if I'm doing this the right way or if there is a better way of doing what I'm trying to do.

 

Thanks

See the Pen bGaapmM by chungeric (@chungeric) on CodePen

[mvaneijgen]

I find that 'normal' people (not developers/designers) don't resize their browser, so it isn't really an issue. But if you care about it why don't you listen for the resize of the browser and run the function of your scrollTrigger again when someone does resize their browser.

 

window.addEventListener("resize", yourFunction);

[GreenSock]

There was indeed a bug/regression related to pinning (and snapping) which it should be fixed in the next release. You can preview it at: https://assets.codepen.io/16327/ScrollTrigger.min.js?v=3.10.3b 

 

Better?

 

Sorry about the confusion there. Thanks for pointing out the issue. 

[surgeonsamuel]

On 4/4/2022 at 7:53 PM, mvaneijgen said:

I find that 'normal' people (not developers/designers) don't resize their browser, so it isn't really an issue. But if you care about it why don't you listen for the resize of the browser and run the function of your scrollTrigger again when someone does resize their browser.

 

window.addEventListener("resize", yourFunction);

 

On the newest version of Safari on iOS the address bar will retract and expand depending on whether the user is scrolling up or down - triggering a resize event every time a user changes scroll directions. So, yeah... it's definitely an issue.

[OSUblake]

Hi Surgeon Samuel,

 

Have you tried the new normalizeScroll feature and ignoreMobileResize?

 

 

Also, the latest version of Safari supports the new small, large, and dynamic viewport units, which can help in creating layouts that won't resize. 

 

https://caniuse.com/viewport-unit-variants

https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/