Unexpected behavior of TweenMax: target jumps to top left of the browser window

[mustaffa]

Hello,

I have a problem with TweenMax. There is a horizontally centered image in top of the page. When tweening starts with the code below the image jumps to the top left and moves to the destination from there. I tried to put static left and top values instead of offset values but it did not solve the problem. This behavior happens with Chrome and Safari. Firefox runs the code as expected. You can see the demo page here.

 

logo_tl.appendMultiple ([
TweenMax.to(kapkare_logo,3,{css:{left:monitor_offset.left+monitor_width*1.4, top:monitor_offset.top+monitor_height/2}}),
TweenMax.to(kapkare_logo,3,{css:{rotation:1440}})
]);

 

thanks in advance all the answers.

cheers.

[GreenSock]

The problem is somewhat unrelated to TweenMax - it has to do with how the browser reports current values using getComputedStyle(). Try running this right before your problematic tween:

 

//logs the current "left" value
console.log("left: "+window.document.defaultView.getComputedStyle(kapkare_logo, null).getPropertyValue("left"));

 

Firefox returns a numeric value, like "570px" whereas Chrome/Safari returns "auto". In order for TweenMax to animate a value, it must know where it starts and ends. How would it know what "auto" means in this context? What number should it start at? See the problem? In most cases, "auto" actually means 0, so that's how TweenMax interprets it.

 

If you specifically set kapkare_logo's "left" style to "auto", you'll see that Firefox acts the same as the Webkit browsers.

 

The solution is to make sure it starts out as a numeric value by either setting it in your css/html, or by doing a fromTo() tween instead of just a to() tween.

[mustaffa]

Thanks.