TweenMax instance
GreenSock Docs
Back to Docs Home (v2)
TweenMax
Constructor
Methods
.delay()
TweenMax.delayedCall()
.duration()
.endTime()
.eventCallback()
TweenMax.from()
TweenMax.fromTo()
TweenMax.getAllTweens()
TweenMax.getTweensOf()
TweenMax.globalTimeScale()
.invalidate()
.isActive()
TweenMax.isTweening()
.kill()
TweenMax.killAll()
TweenMax.killChildTweensOf()
TweenMax.killDelayedCallsTo()
TweenMax.killTweensOf()
TweenMax.lagSmoothing()
.pause()
TweenMax.pauseAll()
.paused()
.play()
.progress()
.repeat()
.repeatDelay()
.restart()
.resume()
TweenMax.resumeAll()
.reverse()
.reversed()
.seek()
TweenMax.set()
TweenMax.staggerFrom()
TweenMax.staggerFromTo()
TweenMax.staggerTo()
.startTime()
.time()
.timeScale()
TweenMax.to()
.totalDuration()
.totalProgress()
.totalTime()
.updateTo()
.yoyo()
TweenMax.from()
TweenMax.from( target:Object, duration:Number, vars:Object ) : TweenMax
[static] Static method for creating a TweenMax instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.
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)
vars: Object
An object defining the starting value for each property that should be tweened as well as any special properties like onComplete, ease, etc. For example, to tween mc.x from 100 and mc.y from 200 and then call myFunction, do this:TweenMax.from(mc, 1, {x:100, y:200, onComplete:myFunction});
Show More
Returns : TweenMax
Details
Static method for creating a TweenMax instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.
NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins (often the desired behavior when inserting into TimelineLite or TimelineMax instances). To illustrate the default behavior, the following code will immediately set the opacity of mc to 0 and then wait 2 seconds before tweening the opacity back to 1 over the course of 1.5 seconds:
TweenMax.from(mc, 1.5, {opacity:0, delay:2});Since the target parameter can also be an array of objects, the following code will tween the opacity property of mc1, mc2, and mc3 from a value of 0 simultaneously:
TweenMax.from([mc1, mc2, mc3], 1.5, {opacity:0});Even though 3 objects are animating, there is still only one tween that is created. In order to stagger or offset the start times of each object animating, please see the staggerFrom() method (TimelineLite has one too).
For simple sequencing, you can use the delay special property (like TweenMax.from(mc, 1, {opacity:0, 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 from() 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.