Advertisement
  1. Web Design
  2. TimelineMax
Webdesign

TimelineMax: Understanding the Mechanics

by
Length:MediumLanguages:
This post is part of a series called The Beginner’s Guide to TimelineMax.
TimelineMax: A Primer
TimelineMax: An Introduction to Tweening
Final product image
What You'll Be Creating

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 artefact. 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.

Syntax

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:

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).

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:

the console would log the entire config variable (represented by tmax_tl.vars) as an object and allow me to inspect every key/value which has been set. There’s a whole list of properties available to your timeline that you can dive into here for further exploration.

Just for fun, give this a try and then inspect the output from your DevTools console:

You should see a similar output to the following screenshot:

Try reporting this next property in the console and watch your mind get blown (console should report a numerical value):

Position Parameter

The true secret to building amazing animation sequences with precise timing is understanding the position parameter. This super-flexible parameter controls the placement of tweens, labels, callbacks, pauses, and even nested timelines, so you'll be able to place anything, anywhere and in any sequence!

For example, if we look at the following code you’ll see that the position parameter is the last argument for the to() method.

Here's an example of how all that looks. Pay close attention to the comments that explain how the position argument lines up the sequence. We're also placing methods one after the other: what's referred to as chaining.

You can think of the position argument as a way to control the placement of a tween on the timeline (by default, it's the end of the timeline and represented as '+=0'). Use a number to indicate an absolute time in terms of seconds. The prefixes such as '+=' or '-=' help to offset the insertion point relative to the end of the timeline. For example, '+=2' would place the tween two seconds after the end, leaving a two second gap.

Practice challenge and instructions to get you started from GreenSock

  1. Visit the editable version of the animation starter file on CodePen.
  2. Click the fork button to make your own copy.
  3. Follow the instructions noted in the code.
  4. When you’re done, tweet the CodePen link to @greensock so they can make you feel extra special.

Labels

You can think of labels as a way to insert markers into your animation so you can reference exact points later in the sequence. This might be a point where #objectX moves 100px from the top then #objectY has an overlapping interaction 0.5 seconds into the #objectX sequence.

When using labels make sure to use a string value to specify where a tween should be placed and include the position timing argument in order to control the execution point.

Note: Most methods carry zero as a default value for the position argument ('+=0').

If you define a label that doesn’t exist yet, it will automatically be added to the end of the timeline before inserting the tween which can be quite convenient.

Methods

Methods are what help to carry out the purpose of our desired action(s), or in other words, the action we’d like to happen for each sequence on our timeline. 

Just for the sake of science, let’s write a method that takes a single object with an id of #objectA and make it move to the right side of the screen. This is how that would look using the to() method:

The Important thing to note based on the code above is the fact that we'll also need the help of CSS (position:absolute) in order to carry out our request (moving the object). Remember that elements in web land have a static position, meaning that if you desire to move an object using the approach above, you'll need to make sure the corresponding CSS properties are in place, otherwise nothing will happen.

Want More?

It’s high time you had something else to dissect, don’t you think? 

The following demo uses the to() method to control each circle of a loader (you could use a simpler approach, but there’s a point to this madness). Try to make the outer circles and middle circle stagger in their movement using the position timing argument. The point of the exercise is to understand visually how the position parameter allows overlapping of your tweens during the sequence. As you can see in the following .gif each circle’s tween fires at the exact same time. Try and give this animation some spice by overlapping the sequence as you saw in the animated gif used for the intro of this post. Good luck, let us know how you get on!

See the Pen by Dennis Gaebel grayghostvisuals on CodePen
See the Pen , fork it and mess around with the timing

Next Time

As always, If you’d like to jump ahead on this animation journey feel free to head on over to the GreenSock documentation –specifically read up on TweenLite and TweenMax. Stay tuned for the next installment of this series covering the wonderful world of tweening! I hope to see you again soon!

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