TweenMax.staggerTo. onCompleteAll callback doesn't work

[nachocorrea22 0 Likes (Newbie)]

TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5, onCompleteAll:test);

 

function test(){

  alert("example")

}

 

 

Why doesn't work?????

 

 

Green sock documentation: "Note that if you define an onComplete (or any callback for that matter) in the vars parameter, it will be called for each tween rather than the whole sequence. This can be very useful, but if you want to call a function after the entire sequence of tweens has completed, use the onCompleteAll parameter (the 5th parameter)."

See the Pen LHGyD by anon (@anon) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

Thanks for providing the CodePen demo.

 

Yup, the problem is that you just need to pass in the parameter test, not onCompleteAll:test.

 

Bad

TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5, onCompleteAll:test);

Good

TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5, test);

I updated your pen

 

http://codepen.io/anon/pen/iCKwb

 

This is arguably one of the more robust methods in the whole API, I'll review the docs and see if I can make it more clear.

[Carl 9,066 Likes (Superhero)]

I've created a new demo that illustrates how the onComplete and onCompleteParam properties work on individual tweens as well as the onCompleteAll parameter for the whole group.

 

//each tween is given and onComplete callback and onCompleteParams property
//onCompleteParams takes an array of values (even if only 1 value is being passed)
//"{self}" passes a reference to the individual tween to the onComplete callback function
//myCompleteAll is the name of the function being used for the staggerTo()'s onCompleteAll parameter
TweenMax.staggerTo(".box", 0.8, {rotation:360, y:120, onComplete:tweenComplete, onCompleteParams:["{self}"]}, 1.2, myCompleteAll);




//the following function fires when each individual tween completes.
//the tween parameter is a reference to the tween that calls the function


function tweenComplete(tween) {
  $console.append("<p> tween complete / target text = " + tween.target.innerHTML + "</p>")
}


function myCompleteAll() {
  $console.append("<p class='done'> all tweens complete </p>");
}

 

http://codepen.io/GreenSock/pen/Eoedn?editors=001

 

This demo will go into the staggerTo() docs when our next updates push goes live.

[joeynimu 0 Likes (Newbie)]

Hi,
I have a question somehow related to this so i thought it's best to just ask it here rather than start a new thread all together. So i have this elements staggering to and i want when all of them are done animating, i call another stagger function with a delay on it. Below is the code that i am tring to use.

var tl = new TimelineMax({
     repeat: -1
     });
    var tlg = new TimelineMax();
var $hovertarget = $('.mygrid_item ');	
			var $image = $('.featured__image img');
			var $grids = $('.grid > .mygrid_item > .featured__image');			
			tlg.to( $('#the__loader') , 0.2, {opacity: 0, onComplete: function(){
            		(this.target).remove() } 
           })
			.staggerFrom( $grids, 0.2, {opacity:0, scale: 0.4, clearProps: 'all', ease: Back.easeOut.config( 1.7)}, 
			0.1, myfunc($image) );
function myfunc(image){
	      tl.staggerFrom(image, 0.2, {scale: 0, opacity: 0, ease: Back.easeOut.config( 1.7), delay: 10}, 5);				
		}

[Diaco 1,948 Likes (Superhero)]

Hi joeynimu 

 

pls try like this  :

.staggerFrom( $grids, 0.2, {...........}, 0.1, myfunc , [$image] );

.staggerTo() Doc : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/

 

 

by the way , in your case you can use timeline's onComplete  too , like this  :

var tlg = new TimelineMax({ onComplete:myfunc , onCompleteParams:[$image] });