Jump to content
GreenSock

Visual-Q

Pass a function to onComplete with parameter without invoking it?

Go to solution Solved by Visual-Q,

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 was wondering if the javascript gurus could advise me.

 

I mada a callback function attached to a Timeline to remove an animation element from the dom on completion like so:

var titleTextAnimation = new TimelineMax( {onComplete:removeElement(animationContainer)});


function removeElement(elementToRomove){
  elementToRomove.remove();
  console.log('animationcomplete');
  }

Then I discover that passing the parameter in parentheses invokes the function immediately without waiting for the callback.

 

How could I do this better? It would be nice if I could pass the parameter in this way.

 

I'm not sure how I might use a 'this' instead inside the function since I don't even know what it would refer to in a onComplete callback(the timeline itself maybe?). 

Link to comment
Share on other sites

Hi Visual-Q :)

 

Sounds like you're looking for onCompleteParams. From the docs:

  • onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example,TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like:onCompleteParams:["{self}", "param2"]
// this should work for you
var titleTextAnimation = new TimelineMax( {onComplete:removeElement, onCompleteParams:[animationContainer]});

Hopefully that helps a bit.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

You can do it is just like PointC showed...

var tl = new TimelineMax({
  onComplete: myCallback,
  onCompleteParams: ["foo", "bar"],
  callbackScope: myScope // what 'this' will refer to
});

function myCallback(a,  {
  console.log("A: %s B: %s", a, ; // A: foo B: bar
}

Another option is to create a bound function...

var tl = new TimelineMax({
  onComplete: myCallback.bind(myScope, "foo", "bar")
});

function myCallback(a,  {
  console.log("A: %s B: %s", a, ; // A: foo B: bar
}

If you don't have a scope, just put null as the first argument.

 

  • Like 3
Link to comment
Share on other sites

  • Solution

Awesome, thanks guys.

 

Exactly what I was looking for.

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