onComplete: get tweened element's data attribute

[bm1967]

Hi

 

I'm trying to find out the best way of referencing the tweened html element from it's onComplete function. I've achieved the following but my gut feeling is there's a better way of doing this

onComplete: function() {
    console.log('appId for el tweened is:', $(this.target[0]).attr("data-appid") );
}

As you can see the above way is using jQuery. Is there an easier way of referencing an attribute in the html element that's been tweened in the onComplete function.

 

Many thanks for advice.

[Jonathan]

Hello bm1967, and Welcome to the GreenSock Forums!

 

You can use the onCompleteParams special property found in Docs:

 

onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example, TweenMax.to(mc, 1, {x:100, onComplete:myFunction, onCompleteParams:[mc, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like: onCompleteParams:["{self}", "param2"]

onCompleteParams: [$(this.target[0]).attr("data-appid")],
onComplete: function(dataappid) {
    console.log('appId for el tweened is:', dataappid);
}

Also keep in mind that other callbacks have their own Params special property which work the same way.

 

Without using jQuery you can use Native JavaScript to get data attribute value:

var element = document.querySelector('#elementWithDataAttribute'),
    data = element.dataset;

console.log(data.appid); 
// data.appid = YOUR DATA appid VALUE;

Resource: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

 

Hope this helps!

[bm1967]

Hi Jonathan

 

Thanks for your reply and you are right in both examples.

 

I was wondering if there may have been an alias in the tween instance that referenced the html element directly.

 

Based on my understanding so far, it would seem that the ways to dynamically reference the html element (a tag that may have been created say, in a loop) in order to (for example) retrieve an attribute value (say 'data-appid') is:

onComplete:function() {
     console.log( 'appid', this.target[0].dataset.appid );
}

or:

onCompleteParams: ["{self}"],
onComplete:function( instance ) {
     console.log( 'appId:', instance.target[0].dataset.appid );
}

or the jQuery example:

onComplete: function() {
    console.log('appId:', $(this.target[0]).attr("data-appid") );
}

Thanks for helping to clarify

[Jonathan]

Yep.. i would opt for always using the GSAP special property with Params ( i.e. onCompleteParams, onStartParams, etc.. )  like in your second example. This way when you pass your reference, you make sure the right variable(s) get passed as parameters within your callback function.

 

Glad to help!

[jamiejefferson]

If you are using a jQuery selector like this:

TweenLite.to($('.foo'), 2, { bar: 100, onComplete: function() { ... } });

then inside the onComplete:

this.target === $('.foo') // jQuery collection
this.target[0] === $('.foo').get(0) // first DOM element in the collection
$(this.target[0]) === $($('.foo').get(0)) // collection of the first element 

Remember, functions like .attr() that return a value already work on just the first element in the collection, so going through those steps manually is redundant.