A Full Course in GSAP for Front-End Animation (Part 2)

In the previous article in this series, we explored GSAP’s TweenMax object, the .to() method it exposes, and how to utilize this method with the appropriate arguments to achieve custom animation effects with minimal fuss.

But there are other methods which are exposed by the use of the TweenMax object (or its counterpart TweenLite, if you’re concerned about package size). One of these methods is .from(), which works identically to .to(); except, rather than specifying an animation’s target state in its options object, .from() identifies an animation’s starting state, and uses the DOM elements CSS-applied styles as the ending state.

In other words, the following line of code causes all divs in our HTML to fade to an opacity of 0 (completely transparent, from a default and implied opacity of 1) over the course of one second,

TweenMax.to("div", 1, {opacity: 0, ease:Power3.easeInOut})

the code below would cause a div to actually fade in (from an opacity of 0 to a default and implied opacity of 1).

TweenMax.from("div", 1, {opacity: 0, ease:Power3.easeInOut})

Here’s an example of using .from() to achieve a bouncy fade-/shrink-in effect on page load:

Here’s a question worth exploring, though. If we wanted to delay this animation’s execution, say 2 seconds after page-load, would the GSAP library somehow parse our tween in advance and “understand” to hold our DOM element’s starting state until that delay ends and the animation fires?

The short answer is yes, this is very possible to achieve; but understanding how to do so and debunking what might be one’s first instinct in trying to achieve it is important. As an exercise, jump into the previous CodePen and wrap the TweenMax inside a setTimeout function set to fire after 2 seconds.

Doesn’t quite work, which makes sense. But there’s a native-to-GSAP option we can use, the “delay” option, which takes a number value in seconds. Get rid of the setTimeout, and insert inside the options object argument a delay property with a number value of 2 (note, not a string “2” or “2s”), and give it another try.

Another powerful method exposed by the TweenMax object is .staggerFrom().

This method is fantastic for constructing staggered animations affecting multiple DOM elements. Take a look at the example below to see it in action.

In this Pen, everything about the staggerFrom method should look familiar, with the exception of the name of the method itself and the additional number argument following the options object. This final number indicates the time delay in seconds (not to be confused with the delay option) between the animation firing on each DOM element targeted by the selector.

In this case, the selector, “.box” targets five separate div elements, which means all five of these divs will perform the animation defined by this method. The use of .staggerFrom() ensures that they will not all fire at the same time, however; and will instead fire one at a time in staggered succession. The new argument, 0.1, will cause a 0.1-second delay between the firing of each animation (again, each on a different DOM element, in the order in which they’re rendered).

To experiment with and better understand this feature, jump into the CodePen above and adjust that final argument to see how it affects the course of the animation.

Note: you can even apply a negative stagger timing, which will swap the order in which the staggered animations are applied! Try changing the new 0.1 argument to -0.1 to see what I mean.

As you might expect by now, .staggerFrom() has an equally-useful counterpart, .staggerTo().

Here’s a demonstration:

In this case, the use of .staggerTo() instead of .staggerFrom() causes the boxes to fade-/shrink- out, rather than fade-/expand-in.

However, you might have noticed that the animation reversed back in after the boxes initially disappeared. This was done with the addition of two new options to the options object argument: “yoyo: true” and “repeat: 1”. Remember, the “repeat” option determines how many times the animation cycle repeats (and a repeat: -1 will cause an animation to repeat infinitely). The “yoyo” option set to true causes an animation to alternate its direction (reverse itself) each time.

What’s critical to understand here, however, is the reversed animation tween counts as its own cycle! I have seen so many students try to create animations which reverse back to their starting state by using “yoyo: true” but no repeat value. Without any repeat value, the tween will only run once. In other words, yoyo: true does not implicitly guarantee that an animation will repeat itself — it doesn’t change the nature of a single animation cycle to include both forwards and backwards tweens! With repeat: 1, the animation runs once forwards, and then repeats once in the backwards direction. If repeat were set to three, the directions of the cycles it underwent would be: forwards, backwards, forwards, backwards.

As a capstone for this lesson, I’m dropping a more complex animation trigger below.

Here, I’m using a series of .staggerTo() tweens wrapped in an if/else statement to trigger a collapsible menu animation. Each time the hamburger button is clicked, a different pair of tweens are executed — either the tweens causing the menu contents to animate in, or the tweens causing the menu contents to animate out.

Note: this is not actually the most efficient or effective way to create this effect; that would call for using GSAPs animation timelines, which I’ll discuss in the next article; but it does demonstrate further how you can use and take advantage of the techniques we’ve gone over thus far.

Explore and experiment with the Pen above, or try replicating it on your own. As a challenge, try applying similar animate-in/animate-out tweens when you hover over the menu list items.

Evan is an illustrator, developer, designer, and animator who tells stories in any which way he can. When he’s not branding businesses or building front-end apps; he’s illustrating children’s books, painting for tabletop games, animating commercials, or developing passion projects of his own.