Jump to content
Search Community

isActive() all timelines

Joostan 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 there,

 

How do i check isActive() across ALL timelines so that i can prevent further animations running until all is NOT active.

 

I have forked pen "check isActive()" to help illustrate my case as seen below but do not know how to proceed.

 

I am:

- using an object organise my timelines.

- trying to prevent multiple animations occurring simultaneously from user input selection.

 

I have also looked at this gsap post which looks like the user solved a similar issue but was not documented.

 

Many thanks

  

Joostan

 

 

See the Pen zWmPwV by Joostan-33 (@Joostan-33) on CodePen

Link to comment
Share on other sites

Well, technically to answer your question you could use TweenMax.getAllTweens() and loop through them like this: 

function anyTweenIsActive() {
  var all = TweenMax.getAllTweens(false),
      i = all.length;
  while (--i > -1) {
    if (all[i].isActive()) {
      return true;
    }
  }
  return false;
}

 

However, this smells to me like more of an architectural issue in the way you're building out your logic. Not that it's "wrong" to do it that way, but you might want to consider using a master timeline that allows you to group your animations, kinda like:

var master = new TimelineLite({autoRemoveChildren:true});

$("button").click(function() {
  if (master.progress() === 1) {
    //previous animations are done.
    master.add(someOtherAnimation).play(0);
  } else {
    //previous animations are NOT done. Let's add an animation that'll run when the others are finished.
    master.add(someOtherAnimation);
  }
});

 

That way, you've got one simple container to check anytime. And you can schedule things however you please. Like if you want to drop an animation in there and start playing it immediately (at the current time rather than stacking it at the end), you'd do:

 

master.add(yourAnimation, master.time());

 

Also, I feel obligated to mention how much I hate UIs that are unresponsive to my clicks and force me to wait until some other animation is finished before I'm "allowed" to interact with things. Just my opinion, though :)

  • Like 3
Link to comment
Share on other sites

Thanks for your feedback.

 

I agree with your comment "unresponsive to user clicks".  So what is the best practice approach so that the user is not restricted and the tweened elements are not left stranded on the "stage" obstructing the incoming tween, because a new animation was called.  ...thinking.

 

Would it be something like:

----------------------

-many

-different

-tweens

-...

----------------------

buttons <1> <2> <3> <....

---------------------

button.clickEvent -> creates timeline and add that tween

 

If another button was clicked it is added to the timeline, in a queue. The user would still have to wait to see the effect of that last clickEvent.

 

Hmmm, maybe if a button was clicked during a tween, stop that tween immediately and somehow clear all elements, then start then last chosen tween.

 

I'd be interested in your thoughts.

 

 

Link to comment
Share on other sites

It's difficult for me to offer advice without seeing what you're dealing with visually. I don't understand why things would be obstructed. Why not just let the buttons fire off the animations naturally (immediately)? Where is the harm? I assume there is one that I'm just not grasping because I don't see the UI you're dealing with. 

 

Feel free to post a reduced test case or something that illustrates the problem. 

 

I highly doubt that it'd be wise to queue up all the animations; if a user clicks a bunch of things, they might be sitting there for a LONG time waiting for things to finish animating which sounds quite annoying. Once you show us what you're dealing with visually, I'm sure we'll be able to weigh in more effectively. 

Link to comment
Share on other sites

One approach is store a reference to the "currentAnimation". Whenever a button is pressed, reverse the currenAnimation and apply an onReverseComplete that will call a function that will then play the next animation. As Jack mentioned, it really stinks to be forced to wait for an AI to allow you to do something. It also stinks watching transitions that are too long. To alleviate that pain, I increase the timeScale of the currentAnimation that is being reversed:

 

See the Pen yJLyxM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Here is a twist on the same theme, but slowed down and with 3 buttons

 

See the Pen XMygdo?editors=0010 by GreenSock (@GreenSock) on CodePen

 

In the demo above click "green"

wait one second

hit "orange"

while green is still reversing quickly hit "grey"

 

You will see that after green reverses then grey will play. it totally skips orange which is good. the "next" animation to play after reverse is the most recently requested animation. With this technique you will never have 6 different animations running out of control at the same time.

  • Like 5
Link to comment
Share on other sites

  • 3 weeks later...
//find a DOM element and name it green
var green = document.querySelector(".green");
//create an animation and name greenTween
var greenTween = TweenLite.to(green, 1, {x:200, paused:true});
//give green a favorite ice cream flavor
green.favoriteIceCream = "chocolate chip cookie dough"


//give green an animation property and assign it to greenTween
green.animation = greenTween;

//tell green's animation to play();
green.animation.play();

green.onclick = function() {
  this.animation.reverse();
  document.querySelector("#message").innerHTML = this.favoriteIceCream
}

 

See the Pen odLGoX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 3
Link to comment
Share on other sites

What I had written earlier (which you probably have in an email notification)  Is that we can assign any property we want to DOM elements. Just like a book can be assigned an author, title and publishing date. We can assign our DOM elements useful properties that we come up with like animation or useless ones like favoriteIceCreamFlavor.

 

The code you were asking about is inside a jQuery each() https://api.jquery.com/each/

 

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

 

I was using an each() loop to run code for each button. 

I was telling each button that it would have its own unique animation.

There were 3 buttons in my demo (green, orange and grey) Each time the code in the loop runs the value of this changes.

On the first iteration this means green button, on the second iteration this means orange and on the third this means grey.

 

The each() loop is just an easy way to do the same thing for each button. In my example I'm building an animation for each button.

 

Study the example 2 posts up to see how javascript allows you to assign properties to DOM elements. And don't worry, this stuff is always confusing until it clicks in. It just takes some time and practice.

 

 

 

  • Like 3
Link to comment
Share on other sites

Thank you so much @Carl. I thought that .animation is some kind of function of a library.

Anyway I manage to add your code onto my animation slider. But I got stacked on something during the reverse().

It shouldn't reverse on one of the tween on the currentAnimation which the active class. Sorry I really don't know how to execute it not the go back on the previous slide then go to the next slide.
 

See the Pen KRzexb by miksv (@miksv) on CodePen

 

Link to comment
Share on other sites

Sorry, but I've looked over your demo multiple times and I really don't understand what is happening or is supposed to happen.

I click on an arrow and then an arrow animates and then a slide pops into view.

 

I think it might be best to work on a much simpler demo. 175 lines is a lot to sort through.

 

 

  • Like 1
Link to comment
Share on other sites

Sorry about that.  Also, the animation of the arrow is just a reference. 

I hope I could explain it better now.


First, if you click the arrow down it should go to the second slide

and after that, if you click the arrow down again it should go to the third slide and so on. (this is what I wanted to happen)

Now, what is happening is when I click the arrow down. It goes to the second slide. But if I clicked it again it goes back to the first slide before going to the third slide.

Sorry again and Thank you.


 

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