Jump to content
Search Community

Know when an animation is paused with Timeline .isActive() or .paused() (BEGINNER)

Juan Ignacio test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hey guys, first of all, THANK YOU for everything you've done for the dev community, GSAP is really really amazing.

I just started with GSAP (and I don't really have a solid JS background...but I'm trying). There might be several mistakes in this pen (I read Most Common GSAP Mistakes) so sorry in advance. Also, this is a reduced version of the whole animation

I've created a Timeline with a "repeat: -1" so it would be infinite, and inside the Tween I'm doing most of the animation inside the onUpdate() (this might be wrong but it started working when I did so).

My main problem is that I can't seem to know when the animation is paused. I've tried with paused() and isActive() but I'm clearly missing something here. I'm trying to just console.log a message when the animation is paused and I'm not getting anything. I'm doing a console.log when it's playing with paused() and isActive() and it works fine...For what I read paused() would be the correct option.

P.S.: english is not my native language, so if anything it's not clear please let me know.

Thanks again!

 

See the Pen PoEgjYz?editors=1111 by jarm41 (@jarm41) on CodePen

Link to comment
Share on other sites

Hi @Juan Ignacio :)

 

Welcome to the forum.

 

I see your pause/resume buttons are working correctly so I'm not sure I follow the question. What are you trying to do with the animation that it's not doing now?

 

31 minutes ago, Juan Ignacio said:

I'm doing most of the animation inside the onUpdate()

Yeah, I'd recommend a timeline for this that you create ahead of time and it just keeps playing until the user presses the pause button. No need to keep running all those checks in the onUpdate callback.

 

Maybe some more info will help us get you a better answer.

 

Happy tweening and welcome aboard.

:)

 

  • Like 1
Link to comment
Share on other sites

Hey @PointC, thanks for your quick answer!
 

45 minutes ago, PointC said:

I see your pause/resume buttons are working correctly so I'm not sure I follow the question. What are you trying to do with the animation that it's not doing now?

Yeap, those are working fine, but I have to do more stuff depending if the animation has been paused or not and I tried to keep the pen as simple as possible, that's why I'm just doing a console.log:

 

if (tl.isActive()) {
      console.log("running - with isActive");
    } else if (!tl.isActive()) {
      console.log("paused - with isActive");
    }

    if (!tl.paused()) {
      console.log("running - with paused");
    } else if (tl.paused()) {
      console.log();
    }

but I never get the "paused" message. I tried both isActive() and paused() to see what happened...so in this simplified case the question would be "Why I'm not getting either the "paused - with isActive" o "paused - with paused" log?


 

57 minutes ago, PointC said:

Yeah, I'd recommend a timeline for this that you create ahead of time and it just keeps playing until the user presses the pause button. No need to keep running all those checks in the onUpdate callback.

I guessed I wasn't doing it the right way haha! But I might do a new topic explaining the whole thing (as I said, this is a simplified version of it, in the "real" one it starts running, users can pause/resume on the main button, click the texts surrounding the circle, click the navigation buttons, and I'm getting trouble depending on wether it was already playing or not...hence the question of the topic. Thanks for your advice.

 

Link to comment
Share on other sites

6 minutes ago, Juan Ignacio said:

Why I'm not getting either the "paused - with isActive" o "paused - with paused" log?

You're checking for the paused state in your onUpdate callback. Once you pause the timeline, that onUpdate is paused as well so you wouldn't get the paused:true console log. Make sense?

 

Happy tweening.

:)

Link to comment
Share on other sites

It certainly does...but I just moved the button clicks and the console logs outside the tween, buttons still work, I get the first console.log indicating that is not active and then nothing when I click again the buttons. This might be a basic js issue which I'm not quite understanding, but I assumed that the way I put it know I would at least get the "running" console log each time I press the play button. Any ideas?

Link to comment
Share on other sites

hmmm... still not sure I follow the need for a pause check since the user pauses it and plays it, but to answer your question:

 

You need to put the pause and isActive checks into a function and call that function with each of your clicks. Something like this.

See the Pen 24913940da15e9541043e0e68a26d99a by PointC (@PointC) on CodePen

 

Does that help?

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Yeah, it helped me to understand the way it works a bit more! But let me clarify why I asked this in first place if it makes sense hahaha

I just updated the pen and now you can click in the texts around the circle and it will advance to that item.

What I've been asked is that wether if it was paused or not, when you click a text, apart from advancing to that item, it should resume the animation from that point and I was trying to avoid to add a tl.resume() inside those clicks if it wasn't neccesary. I'm now thinking that I should have put it this way in the first place to make it clearer.

Thanks again for your time Craig!
 

Link to comment
Share on other sites

  • Solution

Okay... I see - you'll have other controls that will pause/resume. That makes more sense now. Often times I'll just set up a global toggle variable that I can flip from true/false, 0/1 or whatever that I use to keep track of the timeline state. 

 

You may want to take a look at the position parameter. I think it would greatly enhance your project. Happy tweening.

 

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