Jump to content
Search Community

Stagger to- getting the element being tweened

Secretmapper 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

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,
    //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);
Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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

//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')

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



Link to comment
Share on other sites

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);
  • Like 1
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...