Jump to content


the difference btw tweening width vs scale

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

Hey everyone,


lets say I have a div with text inside.

tweening the scaleX squishes the text inside

but tweening the width, correctly only animates the div..

TweenMax.to(header, 2,  {delay: 2.2, width:"0px"});
TweenMax.to(header2, 1, {scaleX: .5, delay:.2,transformOrigin:"0% 0%"});  

Ques: Is there a way to scale using transform/scale without scaling the text inside the division or is that just how CSS works...


on initial search, i didnt see this discussed elsewhere


Thanks in advance,



See the Pen dNpyzj by dwayneaneckles (@dwayneaneckles) on CodePen

Link to comment
Share on other sites

The trick here is to increase the scale of the contents to compensate the decrease in scale of the parent.


Something like:


See the Pen PWGzzV?editors=0010 by anon (@anon) on CodePen


Although, it's not perfect (the easing is a bit off), but it should give you somewhere to go from.


Also note that text wrapping won't work correctly because you're stretching it, as opposed to adjusting the width.

  • Like 1
Link to comment
Share on other sites

Thanks Kez, yea no it doesnt look good doing that

 im fine with using the width.

I just wanted to make sure, there wasnt something in the docs i was missing. trying to do things the "right" way.

its not an issue

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.