Jump to content


Tweenlite infinite rotate with increase/decrease speed option

Moderator Tag
Go to solution Solved by OSUblake,

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



at the moment I have a div that rotates infinite with normal css animations. But I want to do it with Greensock, because i want the animation to be more responsive depending on what I click.


The idea is that I want the div to start rotating after clicking a button. It start slow and builds up speed. After 1 Second it's on full speed and keeps rotating until I press the button again. Then it should decrease the rotation till it stops. 


Could somebody point me in a direction? I would prefer to use tweenLite if that is possible.

See the Pen JYayzY?editors=101 by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi Dipscom,


thank you! That helped me a lot. Now I have this: 

See the Pen jbvawr by anon (@anon) on CodePen


Now i'm not sure how to make the item don't move at the start. It has to react when I click on 'play'.


This is how it should work: 

1. TweenLite.to(rotateCD, 1, {timeScale:1});


after this TweenLite it should blend into


2. TweenMax.to('#creature', .3, {rotation:"360", ease:Linear.easeNone, repeat:-1}, {timeScale:0}

after clicking 'pause' the speed decreases (this is working)
3. TweenLite.to(rotateCD, 2, {timeScale:0});
Link to comment
Share on other sites

Diaco's demo was missing something... You Spin me Round


Hint: turn on your speakers


See the Pen epLjrG by osublake (@osublake) on CodePen

  • Like 6
Link to comment
Share on other sites

Perfect, Blake. Just perfect.

  • Like 1
Link to comment
Share on other sites

@Blake - I'll give you one guess - what song was stuck in my head all afternoon? Thanks for that!   :-D

  • Like 1
Link to comment
Share on other sites

Hi Diaco 

Thanks for Codepen. This helped me. I didn't know about the pause function.



Bingo :) That's what I'm working on. When it's ready I hope it will make it into the example pages from GSAP.


I have one more question. I've made a new Codepen (

See the Pen dYqBNj by anon (@anon) on CodePen

). Now there are 10 Items. 

By clicking a item it starts rotating. All is working fine, but what is the best way too handle this situation? Does every Item need his own TweenMax? There will be around 40 items (and growing). I guess it could be a performance issue later one.

Link to comment
Share on other sites

  • Solution

What's with classie and gator? They weren't loading correctly, but are you trying to not use jQuery?


Using only GSAP...

See the Pen zvJVQa by osublake (@osublake) on CodePen

  • Like 5
Link to comment
Share on other sites

Hi OSUblake,


thank you for your answer. This helped me a lot. And I learned that I can do it all with GSAP :)

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.