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}) );
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post