Possible to Stagger Call?

[james.brndwgn]

Is it possible to stagger a call? I'm using GSAP quite unconventionally for a node project where we turn lights on / off to create effects. So far using the call function it's been quite easy to put together effect timelines. It'd be great if I could toss stagger in to the mix, but I don't think it's possible. Just thought I'd check before going about writing up something to handle a stagger like effect.

 

Thanks in advance!

[mikel]

Hi James,

 

Welcome to GREENSOCK.

 

I´m not sure if I understand your intention.

 

But here - just for fun - a stagger combined with a call:  

See the Pen oZRzWO?editors=1010 by mikeK (@mikeK) on CodePen

 

It would be great if you could provide a CodePen with a brief constellation of your purpose. 

 

Best regards

Manfred

[james.brndwgn]

Hi Mikel, thanks for writing back. Cool Codepen I'm actually using GSAP to run timelines for effects that interact with node.js and the Phillips Hue light api, not any actual DOM animation. It could be total overkill using GSAP for this, but we'll be using GSAP for animations within the interface, so I figured why not. I've actually written a simple function to do what stagger does, but it calls functions instead. Here's the code for anyone interested in doing the same

/**
* Walk  - Use this to create a new effect instance
* eg. let pulseGrp1 = new pulse([1,2,3]);
* @param {Array} lights - An array of light IDs. eg. [1,2,3]
*/
walk (lights) {
  this.lights = lights;

  let timeline = new TimelineMax({ paused: true });
  let time = 0;
  let offset = 0.5;

  lights.forEach((el, index) => {
    timeline
      .call(this.lightsOn, [[el]], this, time)
      .call(this.lightsOff, [[el]], this, time + offset)

    time += offset;
  });

  return timeline;
}

[mikel]

Hi James,

 

I´m not an expert - but it sounds great using GASP in other platforms.

 

There will some comments from experts later on definitely - another actual post is referring this theme also.

 

Kind regards

Manfred

[GreenSock]

If you don't care about going in reverse, you could use a simple onComplete in a staggerTo(): 

timeline.staggerTo(this.lights, offset, {onStart:this.lightsOn, onComplete:this.lightsOff, callbackScope:this}, stagger);

(note "stagger" would be the amount of seconds you want between the start times, which in this case may be the same as "offset" but it's up to you).

 

Is that what you're looking for?