Jump to content
Search Community

TweenMax.staggerTo. onCompleteAll callback doesn't work

nachocorrea22 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

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

  • 8 months later...

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);				
		}

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