TweenLite instance
GreenSock Docs (HTML5/JS)
Back to Docs Home
TweenLite
Constructor
Properties
Methods
.delay()
TweenLite.delayedCall()
.duration()
.endTime()
.eventCallback()
TweenLite.from()
TweenLite.fromTo()
TweenLite.getTweensOf()
.invalidate()
.isActive()
.kill()
TweenLite.killDelayedCallsTo()
TweenLite.killTweensOf()
TweenLite.lagSmoothing()
.pause()
.paused()
.play()
.progress()
TweenLite.render()
.restart()
.resume()
.reverse()
.reversed()
.seek()
TweenLite.set()
.startTime()
.time()
.timeScale()
TweenLite.to()
.totalDuration()
.totalProgress()
.totalTime()
TweenLite.fromTo()
TweenLite.fromTo( target:Object, duration:Number, fromVars:Object, toVars:Object ) : TweenLite
[static] Static method for creating a TweenLite instance that allows you to define both the starting and ending values (as opposed to to() and from() tweens which are based on the target's current values at one end or the other).
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 useFrames:true is set in the vars parameter)
fromVars: Object
An object defining the starting value for each property that should be tweened. For example, to tween mc.x from 100 and mc.y from 200, fromVars would look like this: {x:100, y:200}.
toVars: Object
An object defining the end value for each property that should be tweened as well as any special properties likeonComplete, ease, etc. For example, to tween mc.x from 0 to 100 and mc.y from 0 to 200 and then call myFunction, do this:TweenLite.fromTo(mc, 1, {x:0, y:0}, {x:100, y:200, onComplete:myFunction});
Show More
Returns : TweenLite
Details
Static method for creating a TweenLite instance that allows you to define both the starting and ending values (as opposed to to() and from()tweens which are based on the target's current values at one end or the other).
NOTE: Only put starting values in the fromVars parameter - all special properties for the tween (like onComplete, onUpdate, delay, etc.) belong in the toVars parameter.
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 passing immediateRender:false in the fromVars or toVars parameter so that it will wait to render the starting values until the tween actually begins (often the desired behavior when inserting into TimelineLite or TimelineMax instances).
Since the target parameter can also be an array of objects, the following code will tween the x property of mc1, mc2, and mc3 from 0 to 100 simultaneously:
TweenLite.fromTo([mc1, mc2, mc3], 1, {x:0}, {x:100});Even though 3 objects are animating, there is still only one tween created. In order to stagger or offset the start times of each object animating, please see the staggerFromTo() method of TimelineLite or TweenMax.
For simple sequencing, you can use the delay special property (like TweenLite.fromTo(mc, 1, {x:0}, {x:100, delay:0.5})), but it is highly recommended that you consider using TimelineLite (or TimelineMax) for all but the simplest sequencing tasks. It has an identical fromTo()method that allows you to append tweens one-after-the-other and then control the entire sequence as a whole. You can even have the tweens overlap as much as you want.