Reference currently tweening element outside of timeline

[paulfitz99]

Is there anyway to access the element current element being 'tweened' in a timeline? in the example below, i want to be able to access the currently tweened element on the `onComplete` callback. so on the first line where the element is `#first` I want to be able to set the current `Draggable.zIndex` value 

 

var tl = new TimelineMax({paused: true});
.to('#first', 0.15, {scale: 0, onComplete: paused, onReverseComplete: paused });
.to('#fourth', 0.15, {scale: 1, onComplete: paused, onReverseComplete: paused });


function paused() {
  tl.pause();
//looking for a way to access the current element here
//something like
$(this).css('z-index', Draggable.zIndex);
}

 

 

 

[Dipscom]

Yeah but it's not that obvious at first glance.

 

Here's one way you can reach it.

function log(e) {
 console.log(e._targets[0].id)
}

var tl = new TimelineMax();

tl.to('#me', 1, {x:100, onComplete:log, onCompleteParams:["{self}"]})
  .to('#him', 1, {x:200, onComplete:log, onCompleteParams:["{self}"]});

See the Pen ?editors=1111 by dipscom (@dipscom) on CodePen

[OSUblake]

You don't have to pass in a "{self}" param. Callbacks are automatically scoped, so this will refer to the tween unless you specify the callbackScope or use an arrow function.
 
On every tween is a .target property, so what you had was pretty close.

function paused() {
  tl.pause();
  $(this.target).css('z-index', Draggable.zIndex);
}

 
Do not use ._target as that is private property, and is not safe to use. Anything prefixed with an underscore "_" is private, and not meant to be used.
 
And if you ever need to reference the target of a tween like @Dipscom did getting the id, you should check if the target even has an index first. I modified his demo a bit. If you open up the console in your dev tools, you'll see that there are 3 different types of targets being used.

 

A NodeList and jQuery object have indexes and length, just like an array. Passing in string will return one of those, depending on the selector engine GSAP is using. Passing in an element will not, so there won't be an index. This would result in an error if used on an element.

function logId() {
  console.log(this.target[0].id); // Error on HTMLElement
}

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

 
.

[Dipscom]

Livin' an learnin'