Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Timeline

.eventCallback()

.eventCallback( type:String, callback:Function, params:Array, scope:* ) : *

Gets or sets an event callback like onComplete, onUpdate, onStart, onReverseComplete, or onRepeat along with any parameters that should be passed to that callback.

Parameters

type: String

The type of event callback, like onComplete, onUpdate, onStart, or onRepeat. This is case-sensitive.

callback: Function

(default = null) — The function that should be called when the event occurs.

params: Array

(default = null) — An array of parameters to pass the callback.

scope: *

(default = null)> — The scope in which the callback should be called (basically, what this refers to in the function).

Returns : *

Omitting the parameter returns the current value (getter), whereas defining the parameter sets the value (setter) and returns the instance itself for easier chaining.

Details

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:

  1. //the following two lines produce IDENTICAL results:
  2. var myAnimation = gsap.to(obj, {duration: 1, x: 100, onComplete: myFunction, onCompleteParams: ["param1","param2"]});
  3. 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).

  1. //deletes the onUpdate
  2. 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);

  1. var currentOnComplete = myAnimation.eventCallback("onComplete"); //gets current onComplete
  2. 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.

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×