TimelineMax: An Introduction to Tweening

In the olden days of animation tweening was a term used to describe a frame by frame sequence, or what’s sometimes referred to as “in-betweens.” It’s that place where a single movement leads into the next to create one fluid motion. For those that have gray hair you may recall Flash; an application that used this term when referring to frame movements. Let’s take an insightful look into a few examples and give this tweening thing a good ol’ fashioned college try.

Tweening With TweenMax

For both examples in this tutorial I’ll be loading TweenMax.min.js which will give us access to TimelineMax and all the other amazing core tools GSAP has to offer. If you think back to our TimelineMax primer I discussed loading TweenMax.min.js as it’s more convenient, plus this one file contains pretty much all that we’ll need (also what’s recommended by GreenSock 99% of the time).

TweenMax extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), updateTo(), and more. TweenMax was built for convenience, providing a single JavaScript file containing everything you’ll commonly need for animating DOM elements. It essentially allows authors to specify single movements whereas TimelineMax will accept chained methods to create a more complex set of tweens/sequences.

Loader Sequence

Loaders are those objects given to users when they’re waiting for a process to load. They give us the power to explore tiny, micro-sized elements that can have complex or even simplistic interactions–plus they’re a blast to make.

Take a quick look at this “String of Pearls” demo… 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…
</code></pre>

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:
    2015/03/16