Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

staggerFromTo onCompleteAll with function for stroke

Go to solution Solved by Jonathan,

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've seen several posts about onCompleteAll being placed at the end so it only runs when all tweens of a staggerFromTo have finished. So, here's where I placed it. Is this wrong? Because it never runs the pertyColors function. 


function drawIn() {
  var rbg = toRgb(colors);
  TL.staggerFromTo( selectorsArr, 0.3, 
  { drawSVG: '0' }, { drawSVG: '0 100%', 
    stroke: function(){
      return rbg[Math.floor(Math.random() * rbg.length)];
    visibility: 'visible'
  }, 0.3, pertyColors); // onCompleteAll => pertyColors (not running)

Could it have something to do with the stroke: function() breaking the callback? I've made sure I have the latest js files.


(What I'm trying to do is draw in an SVG, then animate the colors and then draw it out after a period of time.)



See the Pen jAQkqv?editors=0010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

  • Solution

Hello swampthing,


You can check the proper syntax on the staggerFromTo() docs page:



.staggerFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) 

So staggerFromTo() has 9 parameters, But you only have 6 parameters in your syntax

  1. targets
  2. duration
  3. fromVars
  4. toVars
  5. stagger
  6. position   ( looks like your missing the position parameter )
  7. onCompleteAll
  8. onCompleteAllParams
  9. onCompleteScope


  • Like 4
Link to comment
Share on other sites

Hey, Jonathan. Thanks for the reply. Where did you get that list? 


At http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFromTo/ it says...


TweenMax.staggerFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) : Array


Ahhh, wait. I see now. It's at http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/staggerFromTo/ which is the staggerFromTo for TimelineMax

Link to comment
Share on other sites

So, that was it! Thanks so much. Every time I turn around I'm seeing something new here. So, just to be clear, a single tween using staggerFromTo has no need of a position parameter (for obvious reasons) where the staggerFromTo added to a Timeline using the shortcut method needs a position parameter in order to provide a means of altering placement in the timeline either absolutely or relatively.

  • Like 2
Link to comment
Share on other sites

@swampthang exactamundo. You got it. 

Link to comment
Share on other sites

My bad i thought i pasted the link to the staggerFromTo() docs:

And the link to the GSAP Docs page:




Top menu click Support => Docs



Link to comment
Share on other sites

Actually, Jonathan, you pasted the exact right thing. I was missing the whole concept of standalone tweens not needing a position parameter where timeline tweens do. Thanks again.

  • Like 2
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.