Jump to content
GreenSock

TimelineLite

.set()

.set( target:Object, vars:Object, position:* ) : *

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 : *

self (makes chaining easier)

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