TimelineMax: Understanding the Mechanics

Ready for some definitions? Mechanics is defined as an area concerned with the behavior of objects subjected to forces or displacements, and the subsequent effects of those objects on their environment. A timeline is a way of displaying a list of events in chronological order, sometimes described as a project artifact. Let’s bridge the two areas in order to learn how to control and configure our animations as if we actually know what we’re doing.

Final product image


More definitions coming: the term syntax refers directly to the rules and principles that govern structure. As we discussed in our previous tutorial, the JavaScript syntax for setting up a TimelineMax animation is as follows:

var config = {};
var tmax_tl = new TimelineMax(config);

Here I’ve defined a new timeline using the TimelineMax() constructor and passed the config object as an argument. This argument, if you remember, is what’s referred to as an “object literal” containing key:value pairings relating to our configuration settings. The TimelineMax() constructor is what’s used to instantiate a new TimelineMax instance.

Keep in mind as you become accustomed to the syntax, the following lines are the same; meaning both are identical (the last line is intended for convenience).

tmax_tl.add(TweenLite.to(element, 1, { left: 100, opacity: 0.5 }));
tmax_tl.to(element, 1, { left: 100, opacity: 0.5 });
Config and Properties

If you’re anything like me it’s unlikely you’ll remember all the parameters accepted for the TimelineMax configuration options. Luckily, a full list of configuration options and properties can be found here for reference.

Apart from the actual configuration, our timeline also has properties available. For example, if I wrote the following: Read the full article on Tuts+

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview: