Jump to content


Animating maxWidth bug

Recommended Posts

Hey there! It looks like TweenMax isn't animating maxWidth correctly, it just sets it instantly instead of performing an animation. Bug?

See the Pen VbEpyZ by geddski (@geddski) on CodePen

Link to comment
Share on other sites

Thanks for the demo. it appears that since you are not defining a max-width in your css there is no starting value for the tween. The browser does not report a max-width if you do not set one so GSAP has no way of knowing what value you are tweening from.

Something like this may do what you want:


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


  • Like 3
Link to comment
Share on other sites

Hi @geddski


Please ignore @Carl 's overly complicated and confusing demo. Not sure what he was thinking. This should make more sense :-D


See the Pen 9fcaeabc09139c8946ac5c1384469f24 by osublake (@osublake) on CodePen


If you don't get the reference, then you might need to brush up on your flexbox skills. It's free.


  • Like 4
Link to comment
Share on other sites

Flexbox? What dark wizardry do you bring here. Be gone conjurer of cheap tricks.



  • Like 3
Link to comment
Share on other sites

No cheap tricks here. I totally ripped off @geddski Flexbox Zombies game, which is seriously cool.




If you or anybody else didn't understand my demo, just add a max-width value to the text box to get the animation to play.




  • Like 1
Link to comment
Share on other sites

LOL you guys are awesome. Yep setting max-width ahead of time did the trick! Thanks for the help! 

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.