.eventCallback()

Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" along with any parameters that should be passed to that callback. This is the same as defining the values directly in the constructor’s vars parameter initially, so the following two lines are functionally equivalent:

//the following two lines produce IDENTICAL results:
var myAnimation = gsap.to(obj, {duration: 1, x: 100, onComplete: myFunction, onCompleteParams: ["param1","param2"]});
myAnimation.eventCallback("onComplete", myFunction, ["param1","param2"]);

The benefit of using eventCallback() is that it allows you to set callbacks even after the animation instance has been created and it also allows you to inspect the callback references or even delete them on-the-fly (use null to delete the event callback).

//deletes the onUpdate
myAnimation.eventCallback("onUpdate", null);

IMPORTANT: Animation instances can only have one callback associated with each event type (one onComplete, one onUpdate, one onStart, etc.). So setting a new value will overwrite the old one. All of the values populate the vars object which was originally passed into the constructor (think of that like a storage place for configuration data).

This method serves as both a getter and setter. Omitting all but the first parameter returns the current value (getter), whereas defining more than the first parameter sets the value (setter) and returns the instance itself for easier chaining, like myAnimation.eventCallback("onComplete", completeHandler).eventCallback("onUpdate", updateHandler, ["param1","param2"]).play(1);

var currentOnComplete = myAnimation.eventCallback("onComplete"); //gets current onComplete
myAnimation.eventCallback("onComplete", myFunction); //sets the onComplete

Note: - Due to the way JavaScript doesn’t maintain scope (what this refers to, or the context) in function calls, it can be useful to define the scope specifically in the 4th parameter.