1. Code
  2. Animation

TimelineLite Ultimate Starter Guide: Basic Methods and Properties

Read Time:3 minsLanguages:

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.

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.

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

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.

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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.