Window resize break layout bug

[Samuele]

Hi there!
I'm approaching GSAP during these week and I have noticed something odd that affects the layout when the screen is resized (responsive mode)
I've already set all the value to percentage in the js file, and so in .vh for the css margin.

I think that a solution could be refresh the element position once resized a page
Considered all the device (IOS UI bar)

[GreenSock]

Welcome to the forums, @Samuele! 

 

We'd love to help, but you'll need to post a minimal demo so that we can see what you're talking about in context. It's just impossible to troubleshoot blind, that's all. 

[Samuele]

Hi there, You are right!

I tried to reproduce what i'm trying to achieve here:

See the Pen RwpxPKb by sml-k (@sml-k) on CodePen

Basically when I use an Iphone the images are not aligned as they should:
https://cdpn.io/sml-k/debug/RwpxPKb/PNkvYXDxRoBA

[GreenSock]

Can you please elaborate a bit? I don't know what images aren't being aligned in the way you're expecting. 

 

Keep in mind that iOS Safari resizes the window when the user scrolls up or down because it shows/hides the browser chrome. In order to avoid a sudden stop to the momentum-scrolling, ScrollTrigger defers its refresh() until the scroll has stopped. That's when you'll see ScrollTrigger update its positions. 

[Samuele]

2 hours ago, GreenSock said:

Keep in mind that iOS Safari resizes the window when the user scrolls up or down because it shows/hides the browser chrome.

That's what I'm trying to resolve. 
For every images that has a transition effect passed by GSAP, in IOS Safari will be not aligned properly due the browser chrome. (as you can see there is a white space under the bar)

I'm looking for a solution like refreshing the animation on window resize or something like that... would be that possibile?

[OSUblake]

ScrollTrigger does refresh on resize. To grab your updated values, you need to use a function.

y: () => -height / 2.5

 

Also, 100vh might not be what you want on mobile.

https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

 

[Samuele]

Thanks for the feedback!

So to update my value I need to use a function, but would be something like that:

 

ScrollTrigger.refresh();
y: (refresh) => -height / 2.5

(I'm sorry but I will eventually need some lessons of javascript)

[GreenSock]

10 hours ago, Samuele said:

So to update my value I need to use a function, but would be something like that:

 

ScrollTrigger.refresh();
y: (refresh) => -height / 2.5

I don't quite understand your question. Can you elaborate a bit? Perhaps it'd be best if you provided a minimal demo please instead of a small excerpt of the code without any context. 

[Samuele]

On 6/4/2021 at 5:37 PM, OSUblake said:

ScrollTrigger does refresh on resize. To grab your updated values, you need to use a function.

Yeah I'm uploading my Codepen, but I didn't understand how do I insert a function in order to grab the updated values on resize...

[Samuele]

Ok maybe I figured out what is causing trouble.

See the Pen RwpxPKb by sml-k (@sml-k) on CodePen

 

On 6/4/2021 at 5:37 PM, OSUblake said:

Also, 100vh might not be what you want on mobile.

This trick works very fine but when I use a margin-top it actually doesn't aligned properly (please see the previous comment).
Basically I used margin top in css combined with an opposite transition value in gsap.

IE: move "mydiv" of y: 100px, and then in css "mydiv" margin-top: -100px (this allows me to aligned an element in his original position when scrolled)

[Cassie]

See the Pen 8a2b93488881f6b89f6c82d8b4eac40c by cassie-codes (@cassie-codes) on CodePen

I'm not sure exactly what you're trying to do here - your demo has quite a lot going on. But here's a little demo of a tween with a functional value and the invalidateOnRefresh property.

I've added a listener to update the width variable too, hope this helps?

[Samuele]

Thank you @Cassie!
That's exaclty what I'm looking for