Jump to content
Search Community

Stagger onCompleteAll - empty tween case

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

Hey,

I just have a question regarding behaviour of stagger methods callback onCompleteAll.

onCompleteAll does not fire whenever there are no DOM elements found by a tween - in other words, when there's no target DOM to tween (eg. ".nav-item" does not exist), onCompleteAll does not fire. I wish it would, since I have chain logic in my app. I also do not want to validate whether target elements exist every tween call. I simply resolve a promise on the callback and since stagger does not complete, promise does not resolve. How to deal with that?

Thanks

See the Pen ydqOZa by FilipWiniarski (@FilipWiniarski) on CodePen

Link to comment
Share on other sites

Thanks. I understand what you're saying, but I'm trying to understand more about the context. Right now I don't really see too much of a point.

 

But to work around this, you could use a helper function. If the element is not found, TweenMax will return an empty array. If elements are found, the array will have a length other than 0. Knowing that, you can do something like this (FYI I changed the alert to a console.log):

 

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

  • Like 1
Link to comment
Share on other sites

I'm a little confused by this too, but I'd probably just put it on a little timeline like this:

 

var tl = new TimelineMax();
tl.staggerTo(".unexisting-class", 1, {color:"red"}, 1);
tl.add(functionYouNeedToFire);

 

As Zach mentioned, the stagger method returns an array of TweenMax instances. If there are no elements, the array will be empty. By placing this on a timeline, the stagger will play normally if the element is present and then fire the add(). If the element isn't there, the .add() will fire immediately.

 

Just my two cents. 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...