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

Quodlibett · November 8, 2013

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>
<html>
<head>
   
<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>
</head>

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

<script>
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;
   }

</script>
</body>
</html>

Rodrigo · November 8, 2013

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:

body
{
  margin:0;
}

Set a width for the element:

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

Best,

Rodrigo.

Quodlibett · November 9, 2013

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,

Peter

GreenSock · November 11, 2013

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.

GSAP_1.11.2_preview.zip

Notifications

Messages

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

Warning: Please note

Recommended Posts

Quodlibett

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

Quodlibett

Link to comment

Share on other sites

GreenSock

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members