Jump to content
Search Community

(beginner) How can i change the speed of a rotating object ?

Demky 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

Hello, i’m trying to learn how to use GSAP.

 

I want to make a “washing machine” rotation effect :

-          On click object start rotating slowly for 2seconds

-          rotate at max speed for 2 seconds

-          rotate slowly 2 secondes till it’s stop (todo later stop with ease:Elastic.easeOut effect)

 

I thought I could write the 3 orders one after one but when I do so, GSAP only ‘do the first one’ 

(i didnt use any duration because i'm trying first to make the 3 speeds working)

$('#whiteCube').on('click', function(){
  TweenMax.to("#whiteCube", 2, {rotation:360});
  TweenMax.to("#whiteCube", 2, {rotation:720});
  TweenMax.to("#whiteCube", 2, {rotation:360});
});

 

I don't know if this question is related to GSAP but, any idea why only the first click is launching the function ?

the other clics are detected but doesn't  launch the rotation.

 

any tips ?

 

codepen.io/Demky/pen/pXBPGr

 

thank you.

 

See the Pen pXBPGr by Demky (@Demky) on CodePen

Link to comment
Share on other sites

Hi @Demky

 

Welcome to the GSAP forums!

 

The issue you're seeing is because all of your Tweens are trying to run at the same time (using TweenMax). From what I see you'd be best using a Timeline (Max or Lite): see docs here: https://greensock.com/docs/TimelineLite

 

var tl = new TimelineMax({paused: true});

tl
  .to("#whiteCube", 2, {rotation:360})
  .to("#whiteCube", 2, {rotation:1440})
  .to("#whiteCube", 2, {rotation:1800});

$('#whiteCube').on('click', function(){
  tl.play(0);
});

 

You'll want to note that the rotation values are all relative to 0 (not current rotation), so that's why I'm ending on 1080deg (1800 - 1440 = 360). Alternatively, you could set it to make the rotation add x degrees to the current value (by setting a var for current rotation and adding to that, etc).

  • Like 7
Link to comment
Share on other sites

In addition to @elegantseagulls excellent advice, I'd add another approach to this type of animation is tweening the progress(). You create a tween or timeline with all your rotations and other properties that will animate in a paused state. Then tween the progress of that animation and add any in/out eases you like.  In this case the actual timeline or tween with the animation should use a Linear.easeNone so it won't look odd.

 

See the Pen gNyXEx by PointC (@PointC) on CodePen

 

Just my two cents and another idea for you. Hopefully it helps. Happy tweening.

  • Like 5
Link to comment
Share on other sites

thank you for both answer.

 

I used it like that (before seeing PointC's interesting  code):

var javaAnim = new TimelineMax({paused: true});

javaAnim
.to("#JavaSpell", 1, {rotation:360, ease:Linear.easeNone})
.to("#JavaSpell", 0.5, {rotation:1080, ease:Linear.easeNone})
.to("#JavaSpell", 1, {rotation:1800, ease:Elastic.easeOut});


$('#JavaSpell').on('click', function(){
  javaAnim.play(0);
});

 

I don't know if that's really what I had in head; I espected the end to be a bit more elastic but I love it ?
I will continue to try to improve it.

 

Do you know if there is a easy way to rewind something with GSAP or should I write the reverse code by hand ?
I will search for the answer 

javaAnim.gif

Link to comment
Share on other sites

If you're just using rotation, you don't really need to tween the progress like I did in that demo. I was just showing you that as an option to demonstrate the versatility of GSAP. For a simple rotation you can use a timeline too. Here's another fork of your pen with additional possibilities. Notice I'm using relative rotations and I've added a config to the Elastic ease.

https://greensock.com/ease-visualizer

 

See the Pen vqMdNV by PointC (@PointC) on CodePen

 

GSAP and JavaScript in general have so many ways of getting to the same result. It all depends on your needs. 

 

Happy tweening.

:)

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

thank you I will look it ?

 

I'm trying to add a boolean to detect if the click need to launch the rotation or the .reverse() by changing the state of the bool inside the 'animation'

 

I expected it to be like that  but it would have been too easy ?:

     .to("#JavaSpell", 1, {rotation:360, ease:Linear.easeNone}, {"isJavaAnimDone":true})

 

thanks for your time I will continue :) 

 

ps : one question; why do you use var ? aren't we supposed to use let or const with the new JavaScript rules ? (at least they told us that in school)

any particular reason ?

 

edit: finaly I didnt need to change the boolean inside the GSAP animation, I added it inside the function :

$('#JavaSpell').on('click', function(){
  if (!isJavaAnimDone) {
    javaAnim.play(0);
    isJavaAnimDone = true;
  } else {
    javaAnim.reverse();
    isJavaAnimDone = false;
  }

 

 

 

Link to comment
Share on other sites

There are a lot of ways to switch the direction of the timeline on click. Usually you'll just do something like this in your click handler:

 

tl.reversed() ? tl.play() : tl.reverse();

 

That will see which way the timeline is going and flip it. That being said, it also depends on whether you're allowing a click before the animation is finished. In those cases you can check it with the isActive() method.

https://greensock.com/docs/TimelineMax/isActive()

 

6 minutes ago, Demky said:

why do you use var ? aren't we supposed to use let or const with the new JavaScript rules ? (at least they told us that in school)

any particular reason ?

 

Because I'm a rebel and play by my own rules. :D Nah, just a habit. var works just fine for these little demos.

  • Like 2
  • Thanks 1
  • Haha 1
Link to comment
Share on other sites

you think too fast ?, I just edited my message with the boolean;

 

edit : thanks for isActive(), I will read the page and think about your solution : 

tl.reversed() ? tl.play() : tl.reverse();

 

 

Edit2 Wow, I was trying to transform my code to something like your lane with reverse() and bool? aaa : bbb ; I thought the 'reversed' was a typo but in fact that is the answer for doing it with only one lane of code : https://greensock.com/docs/TimelineMax/reversed

Thanks.

  • Like 1
Link to comment
Share on other sites

2 hours ago, Demky said:

ps : one question; why do you use var ? aren't we supposed to use let or const with the new JavaScript rules ? (at least they told us that in school)

any particular reason ?

 

 

Using var isn't going to break the internet, but using let or const might. You don't want to be like this guy, now do you?

 

Ou3MCFW.png

 

 

Well, only on older browsers, but I get why they would teach you to use let or const. I use let/const on real projects, but I use var on these forums because a lot of people don't understand let/const yet.

 

 

 

  • Like 2
  • Thanks 1
  • Haha 3
Link to comment
Share on other sites

On 7/12/2019 at 5:48 PM, PointC said:

There are a lot of ways to switch the direction of the timeline on click. Usually you'll just do something like this in your click handler:

 


tl.reversed() ? tl.play() : tl.reverse();

 


Hello,

Any tips on why when I do use your lane, I need 2 clicks to launch the animation ?

(look like the first click do a reverse (?) and then it launch with the second click (?) - once you clicked, you need to refresh the page to see the "bug" again)

 

code pen :

See the Pen aggyme by Demky (@Demky) on CodePen



it work fine with a flag but I thought your one-lane was cuter

let isJavaAnimDone = false;
$('#javaSpell').on('click', function () {
  if (!isJavaAnimDone) {
    javaAnim.play(0);
    isJavaAnimDone = true;
    console.log("isJavaAnimDone +++ " + isJavaAnimDone);
  } else {
    javaAnim.reverse();
    isJavaAnimDone = false;
  }
});

 

Link to comment
Share on other sites

You need to set your timeline to reversed in the vars.

 

tl = new TimelineMax({reversed:true, paused:true});

 

If it's only paused the first click reverses it, but it's already sitting at 0 so it appears nothing happened. Make sense?

 

Happy tweening.

:)

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

18 hours ago, PointC said:

You need to set your timeline to reversed in the vars.

 


tl = new TimelineMax({reversed:true, paused:true});

 

If it's only paused the first click reverses it, but it's already sitting at 0 so it appears nothing happened. Make sense?

 

Happy tweening.

:)

 

 

thank you for the information (and the new option) it make sense.

 

tl.reversed(!tl.reversed())

??

i don't want to waste your time but how should one find this information(reversed:true)?
I tried to find the solution and didnt find it ?; did you just knew it or did you read it somewhere ?

 

reading https://greensock.com/docs/TimelineMax to see if I missed it

Link to comment
Share on other sites

Hi @Demky,

 

Please look at this page: https://greensock.com/docs/TimelineMax/reversed()

 

.reversed( value:Boolean ) : Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards.

 

myAnimation.reversed( true ); //sets the orientation to reversed
myAnimation.reversed( !myAnimation.reversed() ); //toggles the orientation

 

Happy tweening ...

Mikel

 

  • Like 5
Link to comment
Share on other sites

4 hours ago, Demky said:

 I tried to find the solution and didnt find it ?; did you just knew it or did you read it somewhere ?

 

Yeah, all the info is in the docs, but you're right. Some things are not immediately obvious when you go to set up a real world project. The best advice I can give is to start with the learning section:

https://greensock.com/learning

 

After that you can learn a ton by reading through all the threads here on the forum. Maybe pick a section of the docs to read through each week too. Visiting CodePen and looking for GSAP based pens is always a great way to learn. Find something you like, fork it and then tear it down line by line until you understand what's happening.

 

We're always here if you need any GSAP related assistance. Providing a concise demo (as you did already ?) is the best way to get answers to your problems/questions.

 

Happy tweening.

:)

 

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