Vh / Vw units don't seem to update when browser is resized

[wcomp]

I have this simple little width property animation happening on hover over the parent div. That's working fine but as soon as you resize the codepen (or browser) window, the width property on the #box2 element fails to update. So after the hover animation, the width property always snaps back to it's value upon the last browser window refresh. When I remove the GSAP code, the #box2 element behaves as it should when the browser window is resized. Is there a way to fix this? So that it responds to the resize without having to refresh every time? I need to be able to use the vh and vw units. Below is the codepen so you can see the issue. Thanks for any help! 

See the Pen aPVwPG by Wcomp (@Wcomp) on CodePen

 

See the Pen aPVwPG by Wcomp (@Wcomp) on CodePen

[mikel]

Hi @wcomp,

 

You can use the resize event to update the data when the size of the browser window changes.

 

I would prefer the variant background-image

 

See the Pen MZOvLP by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[GreenSock]

That actually has to do with the fact that the browser will always report the current (computed) values in px, so that's what the "from" value will be recorded as. Thus, when you reverse(), it'll end at that "from" (px) value. One way around that is to define it as a fromTo() tween so that you have control over that "from" value, like this: 

See the Pen 277ea0198fe8acbfb0ba79752472df18 by GreenSock (@GreenSock) on CodePen

 

[wcomp]

On 12/31/2018 at 4:50 AM, mikel said:

Hi @wcomp,

 

You can use the resize event to update the data when the size of the browser window changes.

 

I would prefer the variant background-image

 

See the Pen MZOvLP by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

Hey! Thanks for the response. I see that your pen is behaving differently but I don't see the "resize event"  in the code. Am I missing something? lol.

[wcomp]

On 12/31/2018 at 10:57 AM, GreenSock said:

That actually has to do with the fact that the browser will always report the current (computed) values in px, so that's what the "from" value will be recorded as. Thus, when you reverse(), it'll end at that "from" (px) value. One way around that is to define it as a fromTo() tween so that you have control over that "from" value, like this: 

See the Pen 277ea0198fe8acbfb0ba79752472df18 by GreenSock (@GreenSock) on CodePen

 

That works great. Thanks for your help! Good to know that about fromTo().