Jump to content
Search Community

Tweenlite infinite rotate with increase/decrease speed option

paul_ngc test
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

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

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