How to update the width when resize screen on timeline with scrollTrigger

[BC Development 8 Likes (Newbie)]

I need to update the width to full screen  of my red box when the user resize the screen to bigger and the scroll is on the top
 

before resize

 

after

See the Pen poaJpwb?editors=1010 by huzzidiel-the-flexboxer (@huzzidiel-the-flexboxer) on CodePen

[OSUblake 18,474 Likes (Superhero)]

Hi BC, 

 

That seems a little odd so I'll need to investigate that some more, but here's a work around for now.
 

See the Pen QWQbrKw by GreenSock (@GreenSock) on CodePen

 

[GreenSock 18,243 Likes (Superhero)]

Yes, that's because the parent is display: flex and since you're converting between units (% to px), GSAP uses an invisible element that gets added temporarily (for measurement) but in that context a width: 100% isn't actually 100% due to the way the browser splits the spacing up in display: flex. I've added a workaround to the next release which you can preview at: https://assets.codepen.io/16327/gsap-latest-beta.min.js 

 

Better?

In the meantime, Blake's suggestion is great.