Jump to content
Search Community

Stagger array

friendlygiraffe 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

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 

  • Like 5
Link to comment
Share on other sites

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? 

 

Link to comment
Share on other sites

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

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