self (makes chaining easier)
GreenSock Docs
TimelineLite
.set()
Adds a zero-duration tween to the end of the timeline (or elsewhere using the "position" parameter) that sets values immediately when the virtual playhead reaches that position on the timeline - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(target, 0, {...}) ) but with less code.
Parameters
target: Object
Target object (or array of objects) whose properties will be set.
vars: Object
An object defining the value to which each property should be set. For example, to set element’s left
to 100 and element’s top
to 200, do this:myTimeline.set(element, {left:100, top:200});
position: *
(default = +=0
) — Controls the placement of the zero-duration tween 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 frames for frames-based timelines), 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.
Returns : *

Details
Adds a zero-duration tween to the end of the timeline (or elsewhere using the "position" parameter) that sets values immediately when the virtual playhead reaches that position on the timeline - this is a convenience method that accomplishes the same thing as add( TweenLite.to(target, 0, {...}) )
but with less code, and immediateRender
defaults to false
. In other words, the following two lines produce identical results:
//These two lines produce identical results: myTimeline.add( TweenLite.to(element, 0, {left:100, opacity:0.5, immediateRender:false}) ); myTimeline.set(element, {left:100, opacity:0.5});
You can chain these calls together and use other convenience methods like to(), call(), fromTo(), staggerTo()
, etc. to build out sequences very quickly:
//create a timeline that calls myFunction() when it completes var tl = new TimelineLite({onComplete:myFunction}); //now we'll use chaining, but break each step onto a different line for readability... tl.to(element, 1, {left:100}) //tween element's left to 100 .set(element, {opacity:0}) //then set element.opacity to 0.5 immediately .to(element, 1, {top:50}) //then tween element's top to 50 .call(otherFunction) //then call otherFunction() .staggerTo([element1, element2, element3], 1.5, {rotation:45}, 0.25); //finally tween the rotation of element1, element2, and element3 to 45 and stagger the start times by 0.25 seconds
The default immediateRender
value is false
. For more information about immediateRender, see https://greensock.com/immediateRender
The 3rd parameter is the position
which controls the placement of the tween in the timeline. See https://greensock.com/position-parameter for details. By default, it's at the end of the timeline. Use a number to indicate an absolute time (in 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.
tl.set(element, {left:100}); //appends to the end of the timeline tl.set(element, {left:100}, 2); //appends it at exactly 2 seconds into the timeline (absolute position) tl.set(element, {left:100}, "+=2"); //appends it 2 seconds after the end (with a gap of 2 seconds) tl.set(element, {left:100}, "myLabel"); //places it at "myLabel" (and if "myLabel" doesn't exist yet, it's added to the end and then the tween is inserted there) tl.set(element, {left:100}, "myLabel+=2"); //places it 2 seconds after "myLabel"