Resizing Browser Causing Animation to Malfunction

[msolari 7 Likes (Newbie)]

Hi all!

 

So I have my div, which grows to fill it's parent on click. When you first load the page, it works beautifully. Smooth and natural. But when I go to resize my browser the animation starts doing funny things. I have been wracking my brain on this for a week now and I'm just not understanding what the issue is. I've inspected and tinkered with nearly all the values and attributes in a ton of different combinations and I can't crack it.

 

Any ideas? Thanks in advance for any and all help. I hope you've been having lovely holidays and have big things coming up for the New Year!

See the Pen XVMmLO by msolaridesign (@msolaridesign) on CodePen

[Carl 9,066 Likes (Superhero)]

HI, sorry to hear you are having problems.

Thanks for the demo.

 

I'm not at all familiar with the "unset" value. My guess is that it is causing the engine to record some internal values that would need to be updated when the browser resizes. Typically you want to be tweening numeric values (not strings). Can you explain what you expect to happen when you tween to width:"unset". Again, i'm just not familiar with that property. This is the first time I've seen it.

[msolari 7 Likes (Newbie)]

Well, from my understanding, the unset value allows the div to fill up whatever space is containing it, like water in a bottle. If it weren't for the wrapper, the div would fill the whole screen.

 

I do understand that this seems a bit odd. Usually you would set width:"100%", I used "initial" and "inherit" as well, and it would accomplish the same thing. But those values cause similarly frustrating malfunctions, namely resizing the initial width and height of the retracted div after the animation has been played and reversed.

 

One way or another you are spot on with my issue. It seems that the browser is taking some values and not refreshing them accordingly, no matter which way I am trying to accomplish this.

[GreenSock 8,117 Likes (Superhero)]

I think I see what the problem is - GSAP doesn't natively interpolate "vw" or "vh" units (though it likely will when 2.0.0 is released, but that won't be for a few months most likely). It can set() them directly, but interpolating is different. In this case, the inbetween values are converted to px. So here's a solution that gives you the same result but just does the conversion for you at the right time: 

 

See the Pen 32105d4e392548bc2a9ed139a6285a8b by GreenSock (@GreenSock) on CodePen

 

Is that what you're after? 

 

[msolari 7 Likes (Newbie)]

Ahhh yes, that makes a lot of sense. Very good to know, I don't think I would have come to understand that limitation anytime soon.

 

Thank you greatly for your help, that is exactly the functionality I was trying to accomplish.

 

Happy New Year!