Jump to content
Search Community
Noahdecoco 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



How can I get the actual width of an element after scaling it with Tweenmax?



$('#myDiv').width(100); // Sets width of #myDiv to 100;

TweenMax.set($('#myDiv'), {scale:1.2});

console.log($('#myDiv').width()); // gives 100 instead of 120

How can I get the actual width of the div?


Thanks a lot in advance, this thing is frustrating me and breaking my head today...



Link to comment
Share on other sites



The issue is that width an scale work on different levels.


Think of scale like A magnifying glass, sure the element looks bigger but the actual size is still the same. What you could do is multiply the scale for the element's width and you'll get the magnified width so to speak.


Hope this helps



Link to comment
Share on other sites

Hi and welcome to forums;


Actually when you use scale the engine tweens not the width and height, but the CSS3 transform ( the transform matrix ) of the object. The final style will be something like "z-index: 0; -webkit-transform: matrix(1.2, 0, 0, 1.2, 0, 0); " and the width and the height will stay the same, since the CSS3 transforms are different then the css width and height properties.  Like Rodrigo pointed out, if you need to know the width and height of the element (how big they seem), you just have to multiply width and height by the scale factor.

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...