Jump to content
Search Community

Reference currently tweening element outside of timeline

paulfitz99 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

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() {
//looking for a way to access the current element here
//something like
$(this).css('z-index', Draggable.zIndex);



Link to comment
Share on other sites

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


Here's one way you can reach it.

function log(e) {

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

  • Like 1
Link to comment
Share on other sites

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() {
  $(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


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