Jump to content
Search Community

minWidth not resetting on reverse

zachschnackel test
Moderator Tag

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,

Thank you very much for all the help with 

I ultimately decided to give this another shot a different way -- which was re-using the existing HTML structure we have in our app and taking the class-based animations and putting them in GSAP. What I've noticed (from the CodePen URL) is that the `min-width` property is not resetting back to 100% in IE11 and Edge. If you try that demo in Chrome, Safari, or Chrome, things work as expected, but it stays at that "complete" value I have in the tween. Any help would be great appreciated as this doesn't suffer from the resize-jitters the other example I had did. Thanks!

See the Pen 1e147737971b50717c5f192103f98937 by zslabs (@zslabs) on CodePen

Link to comment
Share on other sites

Ah, very interesting. Looks like a bug in Microsoft browsers that incorrectly report the offsetWidth/Height of %-based children of display:flex elements as 0. From my reading, you're technically not really supposed to use %-based values inside display:flex. You could nest something in a position:absolute element that has top/left/right/bottom set to 0 (so that it fills it), and then the child of THAT could be percentage-based. Kinda weird, I know. 

 

That being said, I implemented a workaround in the upcoming release of GSAP which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - that seems to resolve things in your demo, right? Internally, when GSAP tries to figure out the width/height it'll sense if the parent is display:flex and switch to using position:absolute (just for that measurement). 

  • Like 1
Link to comment
Share on other sites

That did it! Thank you very much for looking into this. Yeah, the whole reason we went down this weird route was due to that other forum post I linked having that weird, jittery bug on resize. Chrome definitely has its quirks, but once again, GSAP to the rescue! Have a great night!

  • Like 1
Link to comment
Share on other sites

If you are asking if betas are hosted somewhere that we publicize and maintain, the answer is no. They are in a near constant state of flux (bug fixes, experimental features, testing etc) and it isn't practical to be uploading / managing all those changes and versions. Hopefully the beta Jack provided will hold you over until the stable release, if you need to use that in production definitely download it and host it yourself. Very dangerous to pull it off of amazon in production.

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.
×
×
  • Create New...