TimelineMax Stagger Animation

If you love animation and interactivity then I’m sure you’ve probably seen or heard of the GreenSock Animation Platform library commonly referred to as gsap. For those unfamiliar, the GreenSock Animation Platform is a suite of tools for scripted animation. We’ll look specifically at TimelineMax and a method called staggerTo().

Demo

See the Pen Bubble Loader by Dennis Gaebel (@grayghostvisuals) on CodePen.1395


Making It Move

Since svg is pretty sweet lets use that to create our loading circles. Also take note that we’re using a single svg element instead of separate SVGs to create our desired number of circles.

<svg height="14" width="100%" version="1.1" viewBox="0 0 100 100">
  <circle cx="-250" cy="50" r="40"/>
  <circle cx="-100" cy="50" r="40"/>
  <circle cx="50" cy="50" r="40"/>
  <circle cx="200" cy="50" r="40"/>
  <circle cx="350" cy="50" r="40"/>
</svg>
le markup

Using the JavaScript below we setup a new timeline called loader, make the timeline frames repeat once our animation has ended, and then reverse the timeline animation playback by using the yoyo property. Next we count how many circle elements are within the svg element and finally define an empty array with the bubbles variable. The reason we setup an array is because the first argument of staggerTo accepts an array of targets (more on that in a bit).

var loader     = new TimelineMax({ repeat: -1, yoyo: true }),
    svglength  = $('svg circle').length,
    bubbles    = [];
le javascript setup

Now that we’ve defined our variables and counted the length of each circle element within the svg we can select each circle individually and push that grouping of selectors to the empty bubbles array we defined earlier.

for(var i = 1, l = svglength; i <= l; i++) {
  bubbles.push($('svg circle:nth-of-type('+ i +')'));
}
le javascript loop

With each circle accounted for and selected the final piece is passing our bubbles array as an argument to the staggerTo method. The beauty of doing things this way is the fact that we can update our Markup by adding or subtracting circles and never touch the JavaScript because things are coded in a dynamic fashion in order to handle such an occasion.

loader.staggerTo(bubbles, .675, {
  css : {
    fill: 'none',
    opacity: 1,
    transform: 'scale(.75)'
  }
}, 0.25);
le GreenSock TimelineMax animation method

The rest of the settings I won't go into further detail, but I thought I would share the thinking behind this approach and use case for this animation method. Happy tweening campers.

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:
    2014/12/31