Jump to content


onComplete: get tweened element's data attribute

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



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.

  • Like 1
Link to comment
Share on other sites

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;

// data.appid = YOUR DATA appid VALUE;

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


Hope this helps! :)

  • Like 2
Link to comment
Share on other sites

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 );


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 :-)

Link to comment
Share on other sites

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! :)

  • Like 1
Link to comment
Share on other sites

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.

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