Jump to content

Codepen Notification

You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

A question of tweenlite rotation

Started by Roger Wu, Mar 07 2013 07:35 AM tweenlite rotation

8 replies to this topic
Roger Wu

Post #1 by Roger Wu , 07 March 2013 - 07:35 AM

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


  • Back to top

jamiejefferson

Post #2 by jamiejefferson , 07 March 2013 - 07:57 AM

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.
  • Back to top

Roger Wu

Post #3 by Roger Wu , 07 March 2013 - 09:10 AM

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


  • Back to top

jamiejefferson

Post #4 by jamiejefferson , 07 March 2013 - 11:36 AM

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.
  • Back to top

Roger Wu

Post #5 by Roger Wu , 08 March 2013 - 09:55 AM

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  :-P  ,my skype id is "wu19870514".

 

Thank you for your help buddy!


  • Back to top

jamiejefferson

Post #6 by jamiejefferson , 09 March 2013 - 11:13 AM

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}});

  • Back to top

Carl
  • Carl
  • 5,490 Likes (Superhero)
  • 7,796 posts

Post #7 by Carl , 09 March 2013 - 02:57 PM

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


  • Back to top

Roger Wu

Post #8 by Roger Wu , 11 March 2013 - 05:50 AM

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.
 


  • Back to top

Roger Wu

Post #9 by Roger Wu , 11 March 2013 - 09:56 AM

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"}});
};

  • Back to top




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

3rd Party Advertisement