Jump to content
Search Community

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

marcode777 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

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

Link to comment
Share on other sites

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.

:)

  • Like 4
Link to comment
Share on other sites

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

  • Like 2
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...