Jump to content


TweenMax.staggerTo onCompleteAll doesn't work

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

I have a simple script that changes images opacity, and need to use onCompleteAll, but it seems neither it does work with TweenMax nor with TimelineLite, I checked on latest versions of FF and Chrome, win7


my code looks like this:


$('img.normal').css('opacity', 0);


TweenMax.staggerTo($('img.normal'), 0.3, {css:{opacity:1}, onCompleteAll:doSth},0.2);


function doSth()


console.log('tweening done');



neither this one works:


var tl = new TimelineLite()

tl.staggerTo($('img.normal'), 0.3, {css:{opacity:1}, onCompleteAll:doSth},0.2);


onComplete works, but that's not what I need


Any help please?

Link to comment
Share on other sites

There is no such thing as an "onCompleteAll" special property, but there is a parameter for the staggerTo() method that's named "onCompleteAll". It's the 5th parameter of TweenMax.staggerTo() (see the docs at: http://api.greensock...html#staggerTo() ) and it's the 7th parameter of TimelineLite.staggerTo(): (http://api.greensock...html#staggerTo() )


TweenMax.staggerTo($('img.normal'), 0.3, {css:{opacity:1}, onCompleteAll:doSth},0.2);

TweenMax.staggerTo($('img.normal'), 0.3, {css:{opacity:1}}, 0.2, doSth);


Note: the reason it's a parameter instead of a special property in the "vars" object is because that "vars" object is passed to EVERY tween that gets created, so an "onCompleteAll" wouldn't make sense in that context. It's just for the staggerTo() method itself, not for each and every tween.

  • Like 3
Link to comment
Share on other sites

Thank you so much guys, my mistake :oops:

I had to switch from flash developing to html/js after a bunch of years doing only flash stuff, I'm not very happy about that.


Thank you Jack for your amazing work.

I found tweening stuff much more pleasent using your engine than doing it with jQuery.

Link to comment
Share on other sites

No problem at all. Happy to hear that the JS port is proving useful and more comfortable for you.


Happy tweening!

Link to comment
Share on other sites

  • 3 years later...



I've been messing around with animating svgs and was trying the onCompleteAll, using the 'Good' method outlined above. However it doesn't appear to be working for me when using it with TimelineMax, it only works with TweenMax. I've got a pen where you can see the getCircPosition function isn't being called. 

See the Pen LkLpYq by petebarr (@petebarr) on CodePen

 Am I doing something fundamentally wrong here?


Don't judge on the unfinished nature of the code ;-)





  • Like 1
Link to comment
Share on other sites

Hi Pete,


Thanks for the demo.

When using TimelineMax.staggerTo() there is a position parameter before onComplete all.


.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* )


docs: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerTo/


I simplified the demo to make it more clear:


  • Like 2
Link to comment
Share on other sites

Ahhhhh! You champ! Cheers for that ;-)

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.