Jump to content


TweenLite.from cuts off some width. Where does the value come from?

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

Learning Greensock by doing I have hit the following: If the following code is run in Firefox/Chrome the final width is (in my case 16px) less than 100% after pressing the button. Can someone point me in the right direction to understand this, please?

<!DOCTYPE html>
    <!--CDN links -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="prefixfree.min.js"></script>

<div class="one" style="padding: 0px; margin:0px; background-color:yellow;">
<div class="itsstatic" id="target" style="padding: 0px; margin:0px; background-color:lightgray;"></div>
<div class="itsstatic" id="target_II" style="padding: 0px; margin:0px; background-color:lightgray;">The width goes from 100% to something less. where does the something less come from?</div>
<div id="updateOutput"></div>
<div id="showProgress" style="background-color:lightgray;"></div>
<button type="button" id="lessWidth">Less width</button>

var updateCount = 0, lessWidth = document.getElementById("lessWidth"), showProgress = document.getElementById("showProgress"), target = document.getElementById("target"), updateOutput = document.getElementById("updateOutput"), change = target.offsetWidth;

showProgress.innerHTML = "Start width " + target.offsetWidth;

lessWidth.onclick = function() {
    target.innerHTML = "new width " + target.offsetWidth;
    TweenLite.from("#target", 5, {backgroundColor:"#ff0000", width:"100%", onUpdate:updateHandler });
//When the button is pressed the width ends up at 100%, so the problem's elsewhere
function updateHandler() {
    target.innerHTML = "New width " + target.offsetWidth;



Link to comment
Share on other sites

Hi and welcome to the Greensock forums.


Never had or saw this issue before, but after asking google I've found that the cause is not defining a width for the target element and since responsive design is a must do this days, almost everyone works with a defined width for every element, reason why no one ran into this before or never has been reported in the forums, that I know.


In your code if you set the element's width to 100% works perfectly, unless you can't define a width for the element, which would be an odd scenario. Another solution is to set the body margin to 0, if you check the problem the width is decreased by 16 pixels and the native margin of the body tag is 8 pixels in any direction, so 8 pixels to the left plus 8 pixels to the right equals 16 pixels less in your element.


Set the body margin to 0:


Set a width for the element:

<div class="itsstatic" id="target" style="padding: 0px; margin:0px; background-color:lightgray;width:100%;"></div>



  • Like 4
Link to comment
Share on other sites

Many thanks for the speedy and extremely helpful reply. You not only made it clear where the problem came from, you also made a fundamental clear to me.


So you have my appreciation double!


Kind regards,


  • Like 1
Link to comment
Share on other sites

Glad you worked it out. 


For the record, I believe I figured out a way to make this work as expected (without setting the body margin or a width on the parent) and it'll be in the upcoming 1.11.2 release. I have attached a preview if you'd like to kick the tires a bit. 


  • Like 2
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.