Jump to content



.TweenLite( target:Object, duration:Number, vars:Object ) ;

TweenLite Constructor creates a tween.


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 end value for each property that should be tweened as well as any special properties like onCompleteease, etc. For example, to tween mc.x to 100 and mc.y to 200 and then callmyFunction, do this:

new TweenLite(mc, 1, {x:100, y:200, onComplete:myFunction}).

Learn more about the properties that can be passed into the vars object below.

Show More


TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP), available in JavaScript, AS2, AS3. A TweenLite instance handles tweening one or more properties of any object (or array of objects) over time. TweenLite can be used on its own to accomplish most animation chores with minimal file size or it can be use in conjuction with advanced sequencing tools like TimelineLite or TimelineMax to make complex tasks much simpler. With scores of other animation frameworks to choose from, why consider the GSAP?

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.