how to do oncompleteAll for staggers

[Lefthandmedia]

Hi,

I'm migrating some tweens from gsap2 to gsap3. i have a tween in my old code

    TweenMax.staggerTo(this.find('.level-1'), .5, {
      autoAlpha: 0, display: 'none', ease: Back.easeIn
    }, -0.03, allComplete, this);

allComplete is a function. How would i do the oncomplete all in GSAP3?

tnx

RDG

 

[Carl]

Just use onComplete in the tween

 

gsap.to("#freds img", { y:100, ease:"none", stagger:0.5, onComplete:function() {
  console.log("done")
}
});

 

See the Pen LYGvdLm?editors=0011 by snorkltv (@snorkltv) on CodePen

 

 

Also be sure to learn about the stagger object

 

Staggering in GSAP3 is SUPER powerful

 

 

 

[ZachSaucier]

See also the stagger docs  

[PointC]

3 hours ago, ZachSaucier said:

See also the stagger docs  

Only when all other attempts have failed.

[Lefthandmedia]

@Carl the onComplete fires after each tweened object. I only want when ALL of them are complete

@ZachSaucier there is no mention of onCompleteAll in the docs. and that is what i ended up using after a lot of trial and error

the solution was

 gsap.to(this.find('.level-1'), {
      duration: .5,
      autoAlpha: 0,
      display: 'none',
      ease: "back.easeIn",
      stagger: {
        each: -0.03,
        onCompleteAll: allComplete,
        onCompleteParams: this
      }
    })

i had the most trouble finding onCompleteParams. Probably worth mentioning in the docs

[Carl]

Hi

 

there must be a misunderstanding here. 
I updated my demo so that it is incredibly clear that the onComplete ONLY fires once after all the staggers finish. You will see the images fade after all Freds move down.  Also the console.log only fires once. Please take another look.