Stagger to- getting the element being tweened

[Secretmapper]

How do I get the element that is being tweened?

[Secretmapper]

To clarify, this is my code. I need to get 'target':

TweenMax.staggerTo($('mini-color-memory-box').children(), 1, {
    boxShadow: "0px 0px 30px 5px " + target.parentElement.attributes.color,
    backgroundColor:target.parentElement.attributes.color,
    borderColor:target.parentElement.attributes.color,
    repeat:1,
    yoyo:true,
    //onComplete: function(){
    //  console.log(this.target.parentElement.attributes.color);
    //}
  }, 1);

Also, I actually have a utility function for the above that returns the tween. However, how can I get an attribute of the target being tweened?

TweenMax.staggerTo($('mini-color-memory-box').children(), 1, 
  myFunctionThatReturnsTheAbove(//how do I pass in my target attribute), 1);

[Rodrigo]

Yep, the stagger instance can be a tricky one.

 

For start the stagger method returns an array of instances. Also you have to consider the fact that the basic principle of the stagger method is tweens overlapping each other, so which one of the active tweens' target you want to retrieve?

 

If the animations are long enough and the stagger time is short enough, at some point you could have all the elements in the array being animated, so if you add an onUpdate callback to retrieve the tween's target, you'll be getting all the elements in the array. Like this:

 

See the Pen qAIxo by rhernando (@rhernando) on CodePen

 

Another options is the isTweening method, but that returns a boolean for the DOM element or object being tweened, not the tween instance. For the Tween instance you can get use the isActive method, but again that wont return the tween's target, but since stagger generates an array of tweens, which tween you want to know is active?.

 

As you can see is a complex situation and, at least the way I see it, the solution will vary in every case scenario.

 

Please feel free to fork and accommodate the codepen to your scenario in order to get a better idea.

 

Rodrigo.

[Rodrigo]

Oh sorry about that, I was typing while you posted the follow-up.
 
this.target should do it, although you already know the parentElement in this case, since you're staggering it's child elements.

//this returns a jquery collection of the child
//elements of the mini-color-memory-box element
$('mini-color-memory-box').children()

//and this returns the attribute of the target's parent
//since the target belongs to a jquery collection
//being staggered but is also the child element
//of $('mini-color-memory-box')
target.parentElement.attributes.color

Perhaps you could store that information in a variable and pass it to the constructor.

 

Rodrigo.

[GreenSock]

If I understand your question correctly, yeah, this.target in the onComplete should give you that reference. Also, remember that you can pass parameters to your onComplete with the onCompleteParams special property, and if you want a self-reference to the tween instance, you can use "{self}" as the parameter, like this:

TweenMax.staggerTo(elements, 1, {y:100, onComplete:function(tween) {
    console.log("finished tweening " + tween.target);
}, onCompleteParams:["{self}"]}, 0.1);