Jump to content
GreenSock

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

Timeline

.call()

.call( callback:Function, params:Array, position:* ) : *

Adds a callback to the end of the timeline (or elsewhere using the position parameter) - this is a convenience method that accomplishes exactly the same thing as add( gsap.delayedCall(...) ) but with less code.

Parameters

callback: Function

The function to call.

params: Array

(default = null) — An Array of parameters to pass the function.

position: *

(default = +=0) — Controls the placement of the callback in the timeline (by default, it’s the end of the timeline, like “+=0”). Use a number to indicate an absolute time in terms of seconds, or you can use a string with a “+=” or “-=” prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the callback 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the callback inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the callback 2 seconds after “myLabel” or "myLabel-=3" to insert it 3 seconds before “myLabel”. If you define a label that doesn’t exist yet, it will automatically be added to the end of the timeline before inserting the callback there which can be quite convenient. Be sure to read our tutorial Understanding the Position Parameter which includes interactive timeline visualizations and a video.

Returns : *

self (makes chaining easier)

Details

Adds a callback to the end of the timeline (or elsewhere using the position parameter) - this is a convenience method that accomplishes exactly the same thing as add( gsap.delayedCall(...) ) but with less code. In other words, the following two lines produce identical results:

  1. myTimeline.add( gsap.delayedCall(0, myFunction, ["param1", "param2"]) );
  2. myTimeline.call(myFunction, ["param1", "param2"]);

This is different than using the onComplete special property on the timeline itself because once you append the callback, it stays in place whereas an onComplete is always called at the very end of the timeline.

For example, if a timeline is populated with a 1-second tween and then you call(myFunction), it is placed at the 1-second spot. Then if you append another 1-second tween, the timeline’s duration will now be 2 seconds but the myFunction callback will still be called at the 1-second spot. An onComplete would be called at the end (2 seconds).

Keep in mind that you can chain these calls together and use other convenience methods like to(), fromTo(), set(), etc. to build out sequences very quickly:

  1. //create a timeline that calls myFunction() when it completes
  2. var tl = gsap.timeline({onComplete: myFunction});
  3. //now we'll use chaining, but break each step onto a different line for readability...
  4. //tween element's left to 100
  5. tl.to(element, {duration: 1, left: 100})
  6. //then call myCallback()
  7. .call(myCallback)
  8. //then set element.opacity to 0.5 immediately
  9. .set(element, {opacity: 0})
  10. //then call otherFunction("param1", "param2")
  11. .call(otherFunction, ["param1", "param2"])
  12. //finally tween the rotation of element1, element2, and element3 to 45 and stagger the start times by 0.25 seconds
  13. .to([element1, element2, element3], {duration: 1.5, rotation: 45, stagger: 0.25});
  1. //appends to the end of the timeline
  2. tl.call(func, ["param1"]);
  3. //appends it at exactly 2 seconds into the timeline (absolute position)
  4. tl.call(func, ["param1"], 2);
  5. //appends it 2 seconds after the end (with a gap of 2 seconds)
  6. tl.call(func, ["param1"], "+=2");
  7. //places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there)
  8. tl.call(func, ["param1"], "myLabel");
  9. //places it 2 seconds after "myLabel"
  10. tl.call(func, ["param1"], "myLabel+=2");

The 3rd parameter is the position which controls the placement of the tween in the timeline (by default, it’s at the end of the timeline). Use a number to indicate an absolute time in terms of seconds, or you can use a string with a “+=” or “-=” prefix to offset the insertion point relative to the END of the timeline.

For example, "+=2" would place the tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the tween 2 seconds after “myLabel” or "myLabel-=3" to insert it 3 seconds before “myLabel”. If you define a label that doesn’t exist yet, it will automatically be added to the end of the timeline before inserting the tween there which can be quite convenient.

Be sure to read our tutorial Understanding the Position Parameter which includes interactive timeline visualizations and a video.

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