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

For those unfamiliar with GSAP by GreenSock, it’s an extraordinarily powerful JavaScript animation library that allows developers to easily put together sophisticated interactions and animation timelines to up their interaction design game and delight users.

Let’s add GSAP to our project with the following CDN script:

<script src="  https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TimelineMax.min.js"></script>

This will add the full Timeline Max package, though GreenSock also supports a lighter version of their library.

For starters, let’s just get a feeling for GSAP syntax with a simple animation of a square div:

And now let’s break down the JavaScript that’s making this run:

TweenMax.to("div", 0.8, { x: 600, yoyo: true, repeat: -1, ease:Linear.easeInOut })

The script we added to the project exposed the TweenMax object, on which we can use several methods to animate DOM elements. In this case, we’re using the .to() method, which here takes three arguments:

• ”div”, a string which serves as a query selector to identify which elements the animation will be applied to;
• 0.8, a number indicating in seconds how long the animation will take;
• and an object, { x: 600, yoyo: true, repeat: -1, ease:Linear.easeInOut }, with a series of properties that detail the particulars of the animation.

So, a string selector, a number duration, and an object of options.

Where the selector is concerned, any valid query selector will work, including compound selectors. If our document in this example contained multiple divs, then all of them would be animated similarly.

The options object exposes a lot of possible properties, from CSS properties we can animate (in this case, “x: 600” indicates we want to move the div exactly 600 pixels along the x-axis), to properties like (1) “yoyo”, (2) “repeat”, and (3) “ease”, which determine (1) whether the animation alternates its direction and returns to its starting state, (2) how many times the animation cycle repeats (in this case, -1 causes it to repeat forever, while 10 would cause the cylce to repeat exactly 10 times), and (3) how the animation eases throughout its cycle (if you’re unfamiliar with animation easing, such as in CSS transition properties, then let me say that it’s part of a much larger topic somewhat beyond the scope of this article, but GreenSock has done a lot of the work of explaining for me with the help of this ease visualizer), respectively.

These are certainly not the only properties exposed in the options object, but they are three of the most important and ones you will most commonly use.

I’d strongly recommend opening that CodePen above, forking it yourself, and experimenting with the arguments in the .to() method to observe how it changes the animation. Try adding additional divs and noting how they all animate identically, based on the single method.

Now take a look at this one:

Still not exactly bringing out the potential wow-factor of GSAP, but notice how each of the four independent divs are being independently transformed along their x-axes (and one along its y-axis) with four independent TweenMax methods; and that a final fifth TweenMax method is causing all four of the divs to rotate 360 degrees (with the property, “rotation: 360”).

In other words, aside from a more expansive look at the query selectors, we’ve seen how multiple animations can easily be applied to the same DOM elements simultaneously.

Once again, try experimenting with the method arguments.

Now let’s experiment with the easing:

Take a look at how much less rigid and robotic the movements of the crimson and blue divs are than the first tomato-colored one. The tomato div has a linear ease, another way of saying no ease at all (it’s identical to Power0 in the ease visualizer).

The crimson div has an ease of Power2, and notice the additional property on its ease value “.easeInOut.” This applies the Power2 easing to movements at both the start and end of the animation. Conversely, the blue div only has the “.easeOut” property. As a result, the blue div only bounces at the bottom of its movement cycle. Change that to .easeInOut or .easeIn to see how it affects the animation.

Then there’s the color change in the blue div. This is accomplished by referring to the corresponding CSS property, “background-color”.” But note that the property has been converted to a JavaScript-friendly syntax, from “background-color” to “backgroundColor.” This same principle applies to all CSS properties that follow the same pattern (“font-size” becomes “fontSize”, “border-radius” becomes borderRadius, etc).

Experiment with different eases and with animating different CSS properties inside the options object.

So far, we should have had the opportunity to become very familiar and comfortable with GSAP’s syntax, but we’re really only scratching the surface of what’s possible.

With the next piece in this series, we’ll start exploring some of the additional methods exposed by the GSAP libraries, such as .from(), .staggerTo(), or .staggerFrom(); and constructing more complex timelines, or series of animations.

For a glimpse of some of what we’ll walk through next:

(Note: click on “menu” to see the animation)

Stay tuned.

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.