Tween instance that handles tweening the timeline between the desired times and labels.
Version:
GreenSock Docs
Back to GSAP
Timeline
Methods
.add()
.addLabel()
.addPause()
.call()
.clear()
.currentLabel()
.delay()
.duration()
.endTime()
.eventCallback()
.from()
.fromTo()
.getChildren()
.getTweensOf()
.invalidate()
.isActive()
.iteration()
.kill()
.nextLabel()
.pause()
.paused()
.play()
.previousLabel()
.progress()
.recent()
.remove()
.removeLabel()
.removePause()
.repeat()
.repeatDelay()
.restart()
.resume()
.reverse()
.reversed()
.seek()
.set()
.shiftChildren()
.startTime()
.then()
.time()
.timeScale()
.to()
.totalDuration()
.totalProgress()
.totalTime()
.tweenFromTo()
.tweenTo()
.yoyo()
Timeline
.tweenFromTo()
.tweenFromTo( fromPosition:*, toPosition:*, vars:Object ) : Tween
Creates a linear tween that essentially scrubs the playhead from a particular time or label to another time or label and then stops.
Parameters
fromPosition: *
The beginning time in seconds or label from which the timeline should play. For example, myTimeline.tweenTo(0, 5) would play from 0 (the beginning) to the 5-second point whereas myTimeline.tweenFromTo("myLabel1", "myLabel2") would play from “myLabel1” to “myLabel2”.
toPosition: *
The destination time in seconds or label to which the timeline should play. For example, myTimeline.tweenTo(0, 5)would play from 0 (the beginning) to the 5-second point whereas myTimeline.tweenFromTo("myLabel1", "myLabel2") would play from “myLabel1” to “myLabel2”.
vars: Object
(default = null) — An optional vars object that will be passed to the TweenLite instance. This allows you to define an onComplete, ease, delay, or any other Tween special property. onInit is the only special property that is not available (tweenFromTo() sets it internally)
Returns : Tween
Details
Creates a linear tween that essentially scrubs the playhead from a particular time or label to another time or label and then stops. If you plan to sequence multiple playhead tweens one-after-the-other, tweenFromTo() is better to use than tweenTo() because it allows the duration to be determined immediately, ensuring that subsequent tweens that are appended to a sequence are positioned appropriately. For example, to make the timeline play from the label “myLabel1” to the “myLabel2” label, and then from “myLabel2” back to the beginning (a time of 0), simply do:
var tl = gsap.timeline();tl.add( myTimeline.tweenFromTo("myLabel1", "myLabel2") );tl.add( myTimeline.tweenFromTo("myLabel2", 0) );
If you want advanced control over the tween, like adding an onComplete or changing the ease or adding a delay, just pass in a vars object with the appropriate properties.
For example, to tween from the start (0) to the 5-second point on the timeline and then call a function named myFunction and pass in a parameter that references this timeline and use a Strong.easeOut ease, you’d do:
myTimeline.tweenFromTo(0, 5, {onComplete: myFunction, onCompleteParams: [myTimeline], ease: "Strong.easeOut"});
Remember, this method simply creates a tween that tweens the time() of your timeline. So you can store a reference to that tween if you want, and you can kill() it anytime.
Also note that tweenFromTo() does NOT affect the timeline’s reversed property. So if your timeline is oriented normally (not reversed) and you tween to a time or label that precedes the current time, it will appear to go backwards but the reversed property will not change to true.
Also note that tweenFromTo() pauses the timeline immediately before tweening its time(), and it does not automatically resume after the tween completes. If you need to resume playback, you can always use an onComplete to call the resume() method.
Like all from-type methods in GSAP, immediateRender is true by default, meaning the timeline will immediately jump to the “from” time/label unless you set immediateRender: false (like .tweenFromTo(1, 5, {immediateRender: false})).