Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
paul_ngc

Tweenlite infinite rotate with increase/decrease speed option

Recommended Posts

Hello,

 

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 post
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 post
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 post
Share on other sites

Hi Diaco 

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

 

@OSUblake

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 post
Share on other sites

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

×