Jump to content
GreenSock

mustaffa

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

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

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.

Link to comment
Share on other sites

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.

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