Stagger array

[friendlygiraffe 17 Likes (Newbie)]

Is it possible to group an array with a separate element, and get them to play sequentially?

 

Something like this:

tl.staggerFrom([circles[0], circles[1], circles[2], ".s1"], 2.5, {rotationX:90, ease:Power4.easeOut}, 0.5)

See the Pen BQJvzv by friendlygiraffe (@friendlygiraffe) on CodePen

[Dipscom 3,366 Likes (Superhero)]

Hi friendlygiraffe,

 

Yes, it should work. I just copied your text and pasted in your example and it worked fine.

 

GSAP will not, however, see that you have an array inside the array and iterate the elements inside the inner array automatically, like you have in the example Pen.

[friendlygiraffe 17 Likes (Newbie)]

Thanks Dipscom, I just wondered if there was a more elegant solution?

[Dipscom 3,366 Likes (Superhero)]

I'd guess it would depend on how many items you are going to have on that array and how many times you want to update that because, you could create a function to create an array based on your initial one plus whatever else you want to add to it. Then, you'd feed the resulting array from the function into your tween.

[friendlygiraffe 17 Likes (Newbie)]

Yeah I wanted to avoid complicating it any further, just thought Greensock might have an inbuilt method for this. Thanks anyway

 

 

I'd guess it would depend on how many items you are going to have on that array and how many times you want to update that because, you could create a function to create an array based on your initial one plus whatever else you want to add to it. Then, you'd feed the resulting array from the function into your tween.

[GreenSock 18,264 Likes (Superhero)]

You could just use a function that'll flatten the array for you. Here's an example: 

var tl = new TimelineMax({repeat:-1, repeatDelay:2});
var circles = [".c1", ".c2", ".c3"];

tl.staggerFrom(getTargets([circles, ".s1"]), 2.5, {rotationX:90, ease:Power4.easeOut}, 0.5);

function isArray(a) {
  return (a && a.push && a.length);
}
function getTargets(targets) {
  if (typeof(targets) === "string") {
    return document.querySelectorAll(targets);
  }
  if (isArray(targets)) {
    var a = [],
        target, i;
    for (i = 0; i < targets.length; i++) {
      target = targets[i];
      if (typeof(target) === "string" || isArray(target)) {
        a = a.concat(getTargets(target));
      } else {
        a.push(target);
      }
    }
    return a;
  }
  return targets;
}

That'll handle any level of nesting too, as well as selector text. Just feed anything to that getTargets() function. Is that what you're looking for? 

[friendlygiraffe 17 Likes (Newbie)]

Thanks, it is a lot of extra lines of code, but yeah that works.

 

 

You could just use a function that'll flatten the array for you. Here's an example: 

var tl = new TimelineMax({repeat:-1, repeatDelay:2});
var circles = [".c1", ".c2", ".c3"];

tl.staggerFrom(getTargets([circles, ".s1"]), 2.5, {rotationX:90, ease:Power4.easeOut}, 0.5);

function isArray(a) {
  return (a && a.push && a.length);
}
function getTargets(targets) {
  if (typeof(targets) === "string") {
    return document.querySelectorAll(targets);
  }
  if (isArray(targets)) {
    var a = [],
        target, i;
    for (i = 0; i < targets.length; i++) {
      target = targets[i];
      if (typeof(target) === "string" || isArray(target)) {
        a = a.concat(getTargets(target));
      } else {
        a.push(target);
      }
    }
    return a;
  }
  return targets;
}

That'll handle any level of nesting too, as well as selector text. Just feed anything to that getTargets() function. Is that what you're looking for? 

 

[GreenSock 18,264 Likes (Superhero)]

Well, the point of the extra lines of code was just to give you a single function that you can use as many places as you want, thus reducing the amount of code overall

[OSUblake 18,476 Likes (Superhero)]

Thanks, it is a lot of extra lines of code, but yeah that works.

 

I would never say that less code is better. Optimized code is usually larger. If you don't care about that or IE8, you could rewrite that function like this.

function getTargets(arr) {  
  return typeof arr === "string" ? Array.prototype.slice.call(document.querySelectorAll(arr), 0) : arr.reduce(function(r, a) {
    return Array.isArray(a) || typeof a === "string" ? r.concat(getTargets(a)) : (r.push(a), r);
  }, []);  
}

See the Pen qqxRJZ?editors=0010 by osublake (@osublake) on CodePen