A question of tweenlite rotation

[Roger Wu]

hello there,I've got a problem in my project.

I've got 5 button to control an element to rotate.

 

 

TweenLite.to($("#element"), 1, {css:{rotation:"+="+72*($(this).index("#button div")-num)}});

 

 

"num" is the current number of the button.

 

But if i click on one button and click another button quickly,then the first rotate animation hasn't finished and the second one start,so it's not i want.

 

Is there any way to solve my problem?

 

Thx guys,I've been stuck for two days...

[jamiejefferson]

When you define a relative value to tween to (a string with += / -= at the beginning), GSAP immediately calculates the value for you, based on the current value of that property. e.g. (no easing used here to make the math simpler)

 

// element rotation is currently at 10
TweenLite.to(element, 1, { rotation: "+=100", ease: Linear.easeNone });
// GSAP calculates final rotation as 110 (10 + 100)
// After half a second, rotation will be at 60.
TweenLite.to(element, 1, { rotation: "+=100", ease: Linear.easeNone });
// GSAP calculates final rotation as 160 (60 + 100)

 

You could instead try recording your destination rotation and calculating the relative value yourself. e.g.

 

//element's rotation is at 10
var nextRotation = 10;
nextRotation += 100; // (10 + 100)
TweenLite.to(element, 1, { rotation: nextRotation , ease: Linear.easeNone });
//GSAP tweens the rotation to 110
//After half a second, rotation will be at 60.
nextRotation += 100; // (110 + 100)
TweenLite.to(element, 1, { rotation: nextRotation, ease: Linear.easeNone });
//GSAP tweens the rotation to 210

The tween will speed up the more times you start the tween while it is running, but this way you should always end up at the rotation value you expected.

[Roger Wu]

thank you jamiejefferson.

 

But I've got a new problem now.

 

I can't chose the direction of  rotation.

 

Sometimes I just want go back 72deg.

 

But the element rotate 288deg...
 

[jamiejefferson]

Hmm DirectionalRotationPlugin (GSAP 1.9.0+), or ShortRotationPlugin might solve your issue. Something like:

// clockwise
TweenLite.to(element, 1, { directionalRotation: (nextRotation + "_cw") });

// counter-clockwise
TweenLite.to(element, 1, { directionalRotation: (nextRotation + "_ccw") });

// shortest direction
TweenLite.to(element, 1, { directionalRotation: (nextRotation + "_short") });

 

If that doesn't work out for you, it might be worth you posting a small demo of what you have so far, so we can see what sort of effect you are trying to achieve. There are multiple ways to implement rotation, and it's a bit hard to diagnose it blind.

[Roger Wu]

Thank you very much jamiejefferson.

1.9 works.but it  still has some bugs need to fix.i think i can handle it.

here is the link,i want use the navgation to conctrl the screen to rotate.

http://222.73.211.219:9009/rg/

 

It's not be finished.You can add my skype if you want    ,my skype id is "wu19870514".

 

Thank you for your help buddy!

[jamiejefferson]

I had a quick look at your site and it looks great. The menu transitioning to the bottom of the page is very cool.

 

I'm wondering if absolute tweens for your pages wouldn't suit your purpose better.

 

If you have a different page aligned to each 72 degree increment, then you should be able to tween directly to that increment, and it should always show the same screen e.g.

     page degrees     screen degrees to see page
pa1  0deg             0deg
pa2  -72deg           72deg
pa3  -144deg          144deg
pa4  -216deg          216deg
pa5  -288deg          288deg

     triggered by     nav div index
pa1  nav2             1
pa2  nav3             2
pa3  nav4             3
pa4  nav5             4
pa5  nav6             5

screenRotation = 72 * ($(this).index("#nav div") - 1);
TweenLite.to($("#screen"), 1, {css: {rotation: screenRotation}});

[Carl]

Hi Roger,

 

Just wanted to jump in and let you know I was very impressed with your site. Nice work!

 

Also thrilled that Jamie was able to help you out so well. As he noted directionalRotation should be a huge help for what you are trying to accomplish. Let us know if you have any trouble with it.

 

-carl

[Roger Wu]

Hi jamiejefferson,

 

Thank you for your advice,I used some code just like your e.g before.

But I want debug the rotation and the $("#screen") has 5 screens,so I make the degree absolute.

 

Sorry for my poor english...

I'm not quite understanding your meaning.

You want to make the code expansibility right?

 

and thank you Carl.I was hesitate to ask question here.because my poor english...haha

 

I'm very appreciate your help,really,and if i got any question i will post here.

 

Thank you guys.
 

[Roger Wu]

Hi guys...
 
I've got another problem now...
 
the URL was change to http://61.147.80.91:5555/
 
Could you have a look?
 
If i click the "RO" button for the first time,the rotation works well.
 
But after I click the "HOME" button to make the navigation middle of the window,when i click the "RO" button again,the rotate effect isn't what i want...
 
How can it be?
 
 
I've try to absolute the degree,but it dosen't work.
 
What's wrong?
 
Here is the code.

TweenLite.to($("#nav2"), .5, {css:{rotation:60}});
TweenLite.to($("#nav2 p"), .5, {css:{rotation:-60}});
TweenLite.to($("#nav3"), .5, {css:{rotation:120}});
TweenLite.to($("#nav3 p"), .5, {css:{rotation:-120}});
TweenLite.to($("#nav4"), .5, {css:{rotation:180}});
TweenLite.to($("#nav4 p"), .5, {css:{rotation:-180}});
TweenLite.to($("#nav5"), .5, {css:{rotation:240}});
TweenLite.to($("#nav5 p"), .5, {css:{rotation:-240}});
TweenLite.to($("#nav6"), .5, {css:{rotation:300}});
TweenLite.to($("#nav6 p"), .5, {css:{rotation:-300}});

//when page loaded,run the code above for once

function navInit(){//To make the navigation move to center
	TweenLite.to(top_earth, 1, {css:{top:-win_height+'px'},ease:Quad.easeInOut});
	TweenLite.to(nav, 1, {css:{top:win_height/2+'px'},ease:Quad.easeInOut});
    TweenLite.to(nav1, 1, {css:{rotation:"0_cw"},ease:Quad.easeInOut});
	TweenLite.to($("#nav1 p"), 1, {css:{rotation:"0"},ease:Quad.easeInOut});
    TweenLite.to(nav2, 1, {css:{rotation:"60_cw"},ease:Quad.easeInOut});
	TweenLite.to($("#nav2 p"), 1, {css:{rotation:"-60"},ease:Quad.easeInOut});
    TweenLite.to(nav3, 1, {css:{rotation:"120_cw"},ease:Quad.easeInOut});
	TweenLite.to($("#nav3 p"), 1, {css:{rotation:"-120"},ease:Quad.easeInOut});
    TweenLite.to(nav4, 1, {css:{rotation:"180_cw"},ease:Quad.easeInOut});
	TweenLite.to($("#nav4 p"), 1, {css:{rotation:"-180"},ease:Quad.easeInOut});
    TweenLite.to(nav5, 1, {css:{directionalRotation:"240_cw"},ease:Quad.easeInOut});
	TweenLite.to($("#nav5 p"), 1, {css:{rotation:"-240"},ease:Quad.easeInOut});
    TweenLite.to(nav6, 1, {css:{directionalRotation:"300_cw"},ease:Quad.easeInOut});
	TweenLite.to($("#nav6 p"), 1, {css:{rotation:"-300"},ease:Quad.easeInOut});
};


function navBottom(){//to make the navigation move to bottom
	TweenLite.to(top_earth, 1, {css:{top:'-600px'},ease:Quad.easeInOut});
	TweenLite.to(nav, 1, {css:{top:nav_distance+'px'},ease:Quad.easeInOut});
    TweenLite.to(nav1, 1, {css:{rotation:"310"}});
	TweenLite.to($("#nav1 p"), 1, {css:{rotation:"-310"}});
    TweenLite.to(nav2, 1, {css:{rotation:"330"}});
	TweenLite.to($("#nav2 p"), 1, {css:{rotation:"-330"}});
    TweenLite.to(nav3, 1, {css:{rotation:"350"}});
	TweenLite.to($("#nav3 p"), 1, {css:{rotation:"-350"}});
    TweenLite.to(nav4, 1, {css:{rotation:"370"}});
	TweenLite.to($("#nav4 p"), 1, {css:{rotation:"-10"}});
    TweenLite.to(nav5, 1, {css:{directionalRotation:"30_cw"}});
	TweenLite.to($("#nav5 p"), 1, {css:{rotation:"-30"}});
    TweenLite.to(nav6, 1, {css:{directionalRotation:"50_cw"}});
	TweenLite.to($("#nav6 p"), 1, {css:{rotation:"-50"}});
};