Timelines

codepen practice page

What is a Timeline?

The GSAP timeline is a powerful tool that allows you to create detailed, sequenced animations. Using "traditional" methods it can be difficult to create and magage manage complex animations involving multiple elements, but GSAP timelines makes the process simple and intuitive. In this lesson we're going to create the relativly simple animation below, but know that with timelines the only limit is your imagination!

Recreating the example

I've created a starter page on codpen that contains all of the visual elements that we'll need to recreate the animation above here..

Elements that we'll be animating

There are essentially three elements that we'll be animating

1.The black circle with an id of circleHolder that starts off small, animates to the center of the svg and then expands to fill it. Our circle positioned at the cebter of the svg and has a radius of 400:

2.A white line with an id of lineHolder that extends across the middle of the svg after the black circle fills the screen:

3.And the individual text elements for each letter in "TEXT ANIMATION", each with a class of "letter". All the text elements are inside a group with the id of textHolder.

Creating the timeline object

The first thing we need to do is create our timeline object.

gsap.timeline( {vars} );

In the animate method let's put the following:

You can configure your timeline object by passing it a vars object that allows you to set various options. For example, we want our animation to yoyo and repeat, so we'll be including those properties in the vars object. Additionally, we'll add a repeatDelay of 1 second to introduce a slight delay between each repetition.

The first part of our animation will be the circle animating down fron "off screen" to the center of the svg, so we'll need to add a fromTo animation to our timeline object. It will look something like this

theTween.fromTo(...)

So in the from part of the animation I set the initial translate y position of the circle to -30, and set it's scale to 0.03 so that it looks like a little dot. In the to part of the animation I move it to the center of the svg (250,20), keeping it's scale at 0.03.

In the next phase of the animation we'll be tweening the scale of the circle from .03 to it's full size (scale:1) so that it covers the entire svg. To do so we simply "chain" another fromTo animation to our current animation:

theTween.fromTo(...).fromTo(...)

You might notice a problem. The circle animates properly to the center, but when it expands it moves to the upper right hand corner, instead of expandig from the center of the svg. Why?

The reason: whenever you use GSAP to animate the transform attribute, you need to explicitly set the translate location. If not, gsap will simply assume a translate position of (0 0). Let's make the correction:

Now let's animate the line. Since our 500px line is already centered inside the lineHolder container, all we need to do is animate the lineHolder element's scale from 0 to 1. Again, we need to make sure that we include the translate position of (250 250), so that the line expends from the center of our SVG.

Now let's animate the text. This is what our animation currently looks like after the line has finished animating.

We want the text to "pop up" over the line once it finishes scaling. We can use the technique we learned last lesson of passing a class name (in this case letter) to the fromTo method and adding a stagger.

Now the only thing remaining is to make the letters look like they're popping up from the line. To do this we'll define a clipPath and then add it to the textHolder (the group that contains all the letters). As you recall from the chapter on reusable elements, a clipPath defines a rectangular area and restricts the visibility of elements to within that specified area, effectively hiding any parts of the elements that fall outside this area. Our clipPath will only allow the text elements to be visible when they animate above the line. Our clipPath will simply be a rectangle that covers the top half of our SVG.

We'll define our clipPath in the defs section, and then apply it to the texHolder (which contains all the letters).

And that's it! You can find the final code here..