Jump to content
Search Community

A question of tweenlite rotation

Roger Wu test
Moderator Tag

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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}});
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.
 

Link to comment
Share on other sites

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"}});
};
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.
×
×
  • Create New...