Jump to content
GreenSock

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

Tween

.eventCallback()

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

Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances) 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. Use "{self}" to refer to the animation instance itself. Example: ["param1","{self}"]

scope: *

(default = null) — The scope in which the callback should be called (basically, what “this” refers to in the function). NOTE: this parameter only pertains to the JavaScript and AS2 versions; it is omitted in AS3.

Returns : *

Omitting the all but the first parameter returns the current value (getter), whereas defining more than the first parameter sets the callback (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 too 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","{self}"]).play(1);

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