Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
msolari

Resizing Browser Causing Animation to Malfunction

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 

 

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×