TimelineLite Ultimate Starter Guide: Basic Methods and Properties

In the first part of this series we took a general look at the capabilities of TimelineLite. In this video I’ll show you how to get up and running with your first TimelineLite animation. You’ll learn about the various methods and properties that will be a foundation for all of the lessons moving forward.

TimelineLite in Action

You can find all the files used to create the SWF above in the source files for this tutorial.

Watch the Screencast

TimelineLite Basic Methods

The following methods are used to add tweens to a TimelineLite. It’s very important to understand the subtle differences as covered in the video.

insert() – Adds tweens to a timeline at a specific time. If no insertion time is specified the tween will be inserted at a start time of zero seconds.

//this tween will be inserted at the beginning of the timeline
 tl.insert( TweenLite.to( mc, 1, {x:100} ) );
//this tween will be inserted 2 seconds into the timeline
 tl.insert( TweenLite.to( mc, 1, {x:100} ), 2);  

append() – Adds tweens to a timeline relative to the end of the timeline. The offset value can be positive or negative. A negative offset will allow tweens to overlap.

//this tween will directly after all previous tweens have finished
 tl.append( TweenLite.to( mc, 1, {x:100} ) );
//this tween will play 1 second before all previous tweens have finished
 tl.append( TweenLite.to( mc, 1, {x:100} ), -1 );

prepend() – Adds tweens to the beginning of a timeline and pushes all existing tweens forward in time.

//this tween occur before any other tweens that exist in the timeline
 tl.prepend( TweenLite.to( mc, 1, {x:100} ) );

TimelineLite Basic Properties

The following properties are very useful for adding functionality to your timelines and for debugging:

• timeScale – Multiplier describing the speed of the timeline where 1 is normal speed, 0.5 is half-speed, 2 is double speed, etc.
• currentProgress – Value between 0 and 1 indicating the progress of the timeline according to its duration where 0 is at the beginning, 0.5 is halfway finished, and 1 is finished.
• duration – Duration of the timeline in seconds

TimelineLite Special Properties

When constructing a TimelineLite you can pass a number of "special properties" into the constructor. The video demonstates onUpdate, onComplete, and paused. The special properties are all contained in a vars object.

//this timeline will be paused initially and when it is done 
//it will call a function called completeHandler
tl = new TimelineLite( {onComplete:completeHandler, paused:true} );

TimelineLite has many more methods, properties and “special properties” which are too numerous to list here. I urge you to investigate all there is to offer in the Official TimelineLite Documentation. The ones listed above are the most important to understand when getting started. As this series progresses I will be introducing more of the tools you will be using to gain advanced control over the setup and playback of your animation sequences.

The next video in this series will focus on controlling a TimelineLite while it is playing. It will cover everything from basic play() and reverse() to adding an interactive scrubber control.

TimelineLite Code Sample

Below is a sample of the code used in the video to illustrate the basic structure of a TimelineLite.

			//constructor
			tl = new TimelineLite();
			
			
			//tweens that introduce car. 
			//insert() puts them all at a time of 0 seconds
			tl.insert( TweenMax.from(gti_mc, .5, {x:-500, blurFilter:{blurX:140}}) );
			tl.insert( TweenLite.from(gti_mc.wheel1_mc, .5, {rotation:-180}) );
			tl.insert( TweenLite.from(gti_mc.wheel2_mc, .5, {rotation:-180}) );
			
			//append() adds tweens relative to the end of the timeline
			//.5 seconds after previous tweens end this text will show for 1 second and then fade out
			tl.append( TweenMax.from(hello_mc, .5, {alpha:0, repeat:1, repeatDelay:1, yoyo:true}) ,.5);
			
			//introduce second text .5 seconds after previous tween ends
			tl.append( TweenMax.from( colors_mc, .5, {alpha:0}), .5 );
			
			//tint sequence
			tl.append( TweenMax.to( gti_mc.body_mc, .2, {tint:blue}) , .5);
			tl.append( TweenMax.to( gti_mc.body_mc, .2, {tint:red}) , .5);
			tl.append( TweenMax.to( gti_mc.body_mc, .2, {tint:black}) , .5);
			
			//last text
			tl.append( TweenMax.from( black_mc, .5, {alpha:0}), 1 );
			
			//optional: inserts black box reveal at the beginning of the timeline
			tl.prepend( TweenLite.from ( cover_mc, .5, {y:0}) );