GSAP/Scroll Trigger Resize Issue

[user100]

I am animating an image as shown in the codepen link, and it works just the way I want it to. The issue is when I hit inspect and change the width of my screen from for example 1440 to 1920, the initial image which is supposed to cover the full width of the screen doesn't anymore, it covers the last known width (thus at 1920, the image is only covering 1440px instead of 1920px in width). How can I fix this? 

See the Pen oNZbgON by usert100 (@usert100) on CodePen

[akapowl]

Hey @user100 - welcome to the forums.

 

You could use a fromTo() tween instead of a .to() tween and specify the width to tween from in the from-object of the .fromTo tween.

 

Does that look better?

 

See the Pen 96384a7e9c1f0249d01904c455f89458 by akapowl (@akapowl) on CodePen

 

[user100]

Thanks @akapowl ! It helps but another issue now is when you resize the start trigger is off. I just added markers to the codepen above and initially it starts at the top of the section which is what I need, but when I resize it looks like 200px above the section. And for my actual code, it seems like it occurs 1vh higher.

[akapowl]

 

Sorry, but I'm afraid I can not reproduce that behaviour, so I am not sure what to tell you.

 

Do you have any specifics on how to resize to make it happen?

...or does it happen for you on every resize, no matter what?