Three.js with staggerTo

[anthonygreco]

Curious, does anyone know how to create a staggerTo() tween with a group of three.js elements. When I tween a position/scale/rotation using .to() it looks like this:

 

TweenMax.to(element.scale, 6, {
  x: 0.4,
  y: 0.4,
  z: 0.4,
  ease: Quad.easeOut
});

I've found a way to make it work, basically just loop through and create a new array. I'm really just curious if anyone has a better way. This is what I have currently:

 

$.each(elements, function(index, elem) {
  staggerElements.push(elem.position);
});
returnData.push(
  TweenMax.staggerTo(staggerElements, 12, {
    x: 0,
    y: 0,
    z: 1.5,
    ease: Quad.easeOut
  }, 0.1)
);

 

[GreenSock]

You have several options:

 

1) Loop it yourself:

var l = elements.length, 
    stagger = 0.1,
    i;
for (i = 0; i < l; i++) {
    TweenLite.to(elements[i].position, 12, {x:0, y:0, z:1.5, ease:Quad.easeOut, delay:stagger * i});
}

2) Create a helper function:

function staggerTo(elements, duration, vars, stagger) {
    var tweens = [],
        l = elements.length, 
        i;
    for (i = 0; i < l; i++) {
        tweens.push( TweenLite.to(elements[i].position, 12, vars).delay(i * stagger) );
    }
    return tweens;
}

That way, the rest of your code could aways just reference your function, creating a nice funnel that you could change later on very easily if you need to. 

 

3) Create a plugin

You can make a plugin do virtually anything you want, but it's probably overkill for this problem. 

 

Does that answer your question?

[anthonygreco]

Answers it excellently.

 

Thanks Jack!