TimelineMax

.fromTo()

.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object, position:* ) : *

Adds a TweenLite.fromTo() tween to the end of the timeline - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.fromTo(...) ) but with less code.

Parameters

target: Object

Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll().

duration: Number

Duration in seconds (or frames if the timeline is frames-based)

fromVars: Object

An object defining the starting value for each property that should be tweened. For example, to tween element’s left from 100 and element’s top from 200,fromVars would look like this: {left:100, top:200}.

toVars: Object

An object defining the end value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween element’s left from 0 to 100 and element’s top from 0 to 200 and then call myFunction, do this: myTimeline.fromTo(element, 1, {left:0, top:0}, {left:100, top:200, onComplete:myFunction});

position: *

(default = +=0) — Controls the placement of the 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. 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 TweenLite.fromTo() tween to the end of the timeline - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.fromTo(...) ) but with less code.

myTimeline.add( TweenLite.fromTo(element, 1, {left:0, opacity:1}, {left:100, opacity:0.5}) );
myTimeline.fromTo(element, 1, {left:0, opacity:1}, {left:100, opacity:0.5});

Keep in mind that you can chain these calls together and use other convenience methods like to(), call(), set(), 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.fromTo(element, 1, {left:0}, {left:-100})    //tween element's left from 0 to -100
  .to(element, 1, {top:50}, "-=0.25")        //then tween element's top to 50, starting it 0.25 seconds before the previous tween ends
  .set(element, {opacity:0})            //then set element.opacity to 0.5 immediately
  .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

If you don't want to append the tween and would rather have precise control of the insertion point, you can use the additional position parameter. Or use a regular add() liketl.add( TweenLite.fromTo(element, 1, {left:0}, {left:100}), 2.75).

The 4th 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 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 which can be quite convenient.

tl.fromTo(element, 1, {left:0}, {left:100});  //appends to the end of the timeline
tl.fromTo(element, 1, {left:0}, {left:100}, 2);  //appends it at exactly 2 seconds into the timeline (absolute position)
tl.fromTo(element, 1, {left:0}, {left:100}, "+=2");  //appends it 2 seconds after the end (with a gap of 2 seconds)
tl.fromTo(element, 1, {left:0}, {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.fromTo(element, 1, {left:0}, {left:100}, "myLabel+=2");  //places it 2 seconds after "myLabel"

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

NOTE: by default, immediateRender is true in fromTo() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. This is done for convenience because it is often the preferred behavior when setting things up on the screen to animate into place, but you can override this behavior by passingimmediateRender:false in the fromVars or toVars parameter so that it will wait to render the starting values until the tween actually begins.

Create an Account

Sign In

GreenSock Docs