get object to rotate in place after clicking on a button, and then resetting again before the next click

[marcode777 2 Likes (Newbie)]

Hey folks, 

  

      This is my first every question on the forum, so I hope to get some answers from some of you who are veterans and much more expert than I am. I've been using Greensock recently, specifically the TweenMax version. I have to say, GREENSOCK IS AMAZING! On to my question, this will be quick and should be fairly simple to answer, so here goes:

           

      How do I get an object to rotate in place after a button it is clicked, and then get it to reset and get ready to rotate again before the button is clicked again?

 

      I would really appreciate some help on this, and I have to re-emphasize that I really think GREENSOCK IS AMAZING! 

 

Thanks again folks!

See the Pen rLAwkA by marcode777 (@marcode777) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi marcode777 

 

Welcome to the GreenSock forums. I'm glad to hear that you're enjoying the platform.

 

To make your element repeat again, you can change line 32 to the following:

$('.btn').click( function(){  Anim.play(0)  }) ;

That will play from the beginning each time you click. To rotate in place, I'd recommend putting your text into an absolutely positioned div and rotate that. Right now you're rotating a <p> tag which is a block level element. That's why the rotation circle is so big. To see what I mean, try temporarily setting a background color on your .w class and then watch it rotate. If you create a little div to hold your "To Do List" text and rotate that, it should work fine for you.

 

Hopefully that helps.

 

Happy tweening and welcome aboard.

[marcode777 2 Likes (Newbie)]

Hi marcode777 

 

Welcome to the GreenSock forums. I'm glad to hear that you're enjoying the platform.

 

To make your element repeat again, you can change line 32 to the following:

$('.btn').click( function(){  Anim.play(0)  }) ;

That will play from the beginning each time you click. To rotate in place, I'd recommend putting your text into an absolutely positioned div and rotate that. Right now you're rotating a <p> tag which is a block level element. That's why the rotation circle is so big. To see what I mean, try temporarily setting a background color on your .w class and then watch it rotate. If you create a little div to hold your "To Do List" text and rotate that, it should work fine for you.

 

Hopefully that helps.

 

Happy tweening and welcome aboard.

Hey PointC,

 

      THAT REALLY HELPED! A BIG THANK YOU FOR THE WELCOME ABOARD! 

 

-marcode777