Having issues in scrollTrigger positions disturbed on windows resize

[Usama-Khan]

I'm making the rolodex section in wordpress elementor the issue is with scrollTrigger is not refreshing on window resize I've tried putting an event listener on windows of resize and put scrolltrigger.refresh() but still not expected result below is the minimal codepen that i could create in time limit that i got. So what I've found is that I have a section above this specific section which is causing layout shifts which can't be stopped as they are images

See the Pen raVaPyz by Usamakhan94 (@Usamakhan94) on CodePen.

[mvaneijgen]

Hi @Usama-Khan welcome to the forum!

 

Your Codepen is completely blank for me, so I'm not sure what needs to be happening.

 

A few notes on ScrollTrigger:

• It calls .refresh() already on a page resize (debounced when the vistor has stopped resizing) 
• Have you seen https://gsap.com/docs/v3/Plugins/ScrollTrigger/#invalidateOnRefresh
• If you use dynamic values use function base values https://gsap.com/docs/v3/GSAP/Tween/#function-based-values
• position: fixed; and position: sticky; do not work with ScrollTrigger, use the pin method instead 

7 hours ago, Usama-Khan said:

causing layout shifts which can't be stopped as they are images

That sounds incorrect to me, you can give images a width and an height so that they always take of their space even if they are not load. 

 

Hope it helps and happy tweening! 

[Usama-Khan]

18 hours ago, mvaneijgen said:

Hi @Usama-Khan welcome to the forum!

 

Your Codepen is completely blank for me, so I'm not sure what needs to be happening.

 

A few notes on ScrollTrigger:

• It calls .refresh() already on a page resize (debounced when the vistor has stopped resizing) 
• Have you seen https://gsap.com/docs/v3/Plugins/ScrollTrigger/#invalidateOnRefresh
• If you use dynamic values use function base values https://gsap.com/docs/v3/GSAP/Tween/#function-based-values
• position: fixed; and position: sticky; do not work with ScrollTrigger, use the pin method instead 

That sounds incorrect to me, you can give images a width and an height so that they always take of their space even if they are not load. 

 

Hope it helps and happy tweening! 

Well I've tried pin method but the issue is something else the main issue is when the screen resizes the positions of scrolltrigger gets disturbed and doesn't refresh however i put sticky because while using pin screen resizing issue was still occuring so i had to use sticky so the position of scrolltigger doesn't break the complete UI and the image is some what can be handled the issue is client wants it to be free of width and height it should change its height and width according to screen so layout shift also occurs

[Rodrigo]

Hi,

 

AS @mvaneijgen already mentioned, nothing happens in your demo, here is a screen recording:

https://i.imgur.com/cq1xkUw.mp4

 

Is impossible for us to know what could be the issue without a minimal demo that clearly illustrates the problem. In your case you presented a minimal demo (thanks for that) but it doesn't show us what could be the problem 🤷‍♂️

[Usama-Khan]

Well thanks everyone the issue is fixed, The issue was when layout shifts and user is in mid animation the rolodex cards were being forced to switch their position so the animation was breaking I've tried to refresh it on screen resize it still didn't work so simply i just changed the upper sections to max height 100vh and so that fixed it but there was images on that upper section so I had to hardcode the width of those images