Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Mr Pablo

Setting rotation to -180 or 180 = No rotation!

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

I am trying to set the rotation on an image to an initial value of -180 (this also happens with 180).


I am setting it using the following code


tn = TweenMax.set( $('#asset'), {
                            rotation: data.angle
                        } );

(other values are also set)


When I play my animation, the image is the right way up!


If I change the value to -179, or 179, the image is correctly upside-down (ignoring the 1 degree difference)


I have tried with the latest version of GSAP (1.11.1).


Any idea as to why this is happening?


NB I tried using just "data.angle" and also "parseInt(data.angle)" but it made no difference. I also tried add " + 'deg' " to the end, no difference.

Link to comment
Share on other sites

Does it still fail if you replace data.angle with 180 directly? TweenMax.set(element, { rotation:180 }) is working well for me in 1.11.1.


What kind of value is stored in data.angle? i.e. what is logged when you try

console.log(typeof data.angle, data.angle);
tn = TweenMax.set($('#asset'), { rotation: data.angle });

I think you'll probably have to setup a live demo of this (perhaps codepen.io or jsfiddle.net?) that shows the rotation failing only on rotation:180.

Link to comment
Share on other sites

Console is reporting the value as a string


EDIT -OK, super weird, I think it's Chrome spazzing out haha! Gonna restart Chrome and check :)

Link to comment
Share on other sites

Yeah, seems to work great for me regardless of whether you set it directly with a numeric 180, or a string "180". I wonder if there's something else going on in your code somewhere that's causing the odd behavior. Feel free to post a simple codepen or jsfiddle that demonstrates the issue and we'll gladly take a peek. 

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.