TweenLite.to(targetSprite, 1.5, {x:100});

targetSprite is the animated object, 1.5 is duration in seconds, and {x:100} defines the final horizontal position after easing completes. This creates a linear movement from the sprite’s current x to 100 over 1.5 seconds.

TweenLite.from(targetSprite, 1.5, {x:100});

This reverses the direction: the sprite animates from x=100 to its initial position over 1.5 seconds.

Both TweenLite.to() and TweenLite.from() return TweenLite instances for later control. Additional properties extend functionality:

Core Animation Properties

// Delay animation by 2 seconds
TweenLite.to(targetSprite, 1, {x:100, delay:2});

// Add elastic easing and completion callback
TweenLite.to(targetSprite, 1.5, {x:100, ease:Elastic.easeOut, delay:0.5, onComplete:logFinish});
function logFinish():void {
    trace("Animation finished successfully");
}

• ease: Specifies easing curves (e.g., Elastic.easeOut for a bouncy end).
• onComplete: Function executed when the tween ends.
• onCompleteParams: Optional array of arguments passed to the onComplete function.

  TweenLite.to(ball, 2, {rotation:360, y:200, onComplete:handleComplete, onCompleteParams:["final rotation"]});
  function handleComplete(message:String):void {
      trace("Tween done: " + message);
  }
  

Tween Control Methods

The returned TweenLite instance supports these control operations:

• pause(): Pauses the animation mid-tween.
• resume(): Resumes a paused tween.
• reverse(): Plays the animation backward over the remaining duration.
• restart(): Replays the entire tween from the start.

import com.greensock.*;
import com.greensock.easing.*;

var isPaused:Boolean = false;
var activeTween:TweenLite;
var controlBtn:SimpleButton = new SimpleButton();
var startBtn:SimpleButton = new SimpleButton();

// Initialize buttons
controlBtn.enabled = false;
startBtn.addEventListener(MouseEvent.CLICK, startAnimation);
controlBtn.addEventListener(MouseEvent.MOUSE_DOWN, togglePauseReverse);

function startAnimation(event:MouseEvent):void {
    controlBtn.enabled = true;
    activeTween = TweenLite.from(targetSprite, 10, {x:300, y:300, alpha:0.5, delay:2, onComplete:finishCallback});
}

function finishCallback():void {
    trace("Animation complete. Target properties settled.");
    trace(activeTween); // Output: [object TweenLite]
}

function togglePauseReverse(event:Event):void {
    if (!isPaused) {
        activeTween.pause();
        isPaused = true;
    } else {
        activeTween.reverse();
        isPaused = false;
    }
}

Overwrite Manager

The overwrite property (from OverwriteManager) resolves conflicting tweens on the same object. It supports 5 modes:

• 0: Fastest mode (no property conflict checks).
• 1: Optimized for button rollover/rollout events.
• 2: Default (AUTO mode), balances performance and conflict resolution.

Usage examples:

OverwriteManager.init(2); // Initialize with AUTO mode
TweenLite.to(targetSprite, 1, {x:100, overwrite:2}); // Explicitly use AUTO mode
// Or use boolean shorthand
TweenLite.to(targetSprite, 1, {x:100, overwrite:true}); // Equivalent to AUTO mode

TweenLite vs. TweenMax

Example using both libraries:

TweenLite.to(targetSprite, 1.5, {x:100, y:200, ease:Strong.easeOut});
TweenMax.to(targetSprite, 1.5, {x:100, y:200, ease:Strong.easeOut, tint:0xFF0000}); // Adds red tinting

TimelineLite for Sequential/Parallel Tweens

Treat TimelineLite as a reusable animtaion container (similar to a MovieClip) to chain or overlap tweens precisely.

Sequential Animation

var timeline:TimelineLite = new TimelineLite();
timeline.append(new TweenLite(targetSprite, 1, {x:100}));   // Move right first
timeline.append(new TweenLite(targetSprite, 1, {y:200}));   // Then move down
timeline.append(new TweenMax(targetSprite, 1, {tint:0xFF0000})); // Finally tint red

These tweens execute one after another.

Interactive Timeline

Pause the timeline initially and control playback via mouse events:

var timeline:TimelineLite = new TimelineLite({paused:true});
timeline.append(new TweenLite(targetSprite, 1, {x:100}));
timeline.append(new TweenLite(targetSprite, 1, {y:200}));
timeline.append(new TweenMax(targetSprite, 1, {tint:0xFF0000}));

var menuBtn:SimpleButton = new SimpleButton();
menuBtn.addEventListener(MouseEvent.ROLL_OVER, playTimeline);
menuBtn.addEventListener(MouseEvent.ROLL_OUT, reverseTimeline);

function playTimeline(event:MouseEvent):void {
    timeline.play();
}
function reverseTimeline(event:MouseEvent):void {
    timeline.reverse();
}

Advanced Timeline Positioning

Use insert() to place tweens at specific times or labels, and append() with offsets to delay execution:

var timeline:TimelineLite = new TimelineLite();
// Insert tween to start at 1 second mark
 timeline.insert(new TweenLite(targetSprite, 2, {x:100}), 1);
// Append tween to start 1.5 seconds EARLY (overlaps previous)
 timeline.append(new TweenLite(targetSprite, 1, {y:200}), -1.5);
// Add a label at 4 seconds
 timeline.addLabel("spinPhase", 4);
// Insert a 360° rotation at the "spinPhase" label
 timeline.insert(new TweenLite(targetSprite, 1, {rotation:360}), "spinPhase");

Batch Operations

Animate an array of sprites simultanoeusly and schedule delayed function calls:

// Fade all sprites in from above
 timeline.insertMultiple(TweenMax.allFrom(spriteArray, 1, {y:"-100", autoAlpha:0}));
// Call myFunction() after 2 seconds with parameters
 TweenLite.delayedCall(2, myFunction, ["param1", 42]);
function myFunction(msg:String, value:int):void {
    trace("Delayed call: " + msg + ", " + value);
}

Relative Positioning

Use string values to define relative property changes:

// Move targetSprite 100px right from current position
 TweenLite.to(targetSprite, 1, {x:"100"});
// For dynamic relative values, convert to string first
 var offset:Number = 50;
 TweenLite.to(targetSprite, 1, {x:String(offset)});

Global Tween Control (TweenMax Only)

TweenMax.pauseAll(); // Pause every active tween
TweenMax.killAll(); // Stop and remove all active tweens