My aim in this article is to give you a thorough introduction to GreenSock, also known as GSAP (GreenSock Animation Platform), a super performant, professional-grade HTML5 animation engine for the modern web.

This is the fourth article in the series Beyond CSS: Dynamic DOM Animation Libraries.

Animating the DOM with Anime.js touches on how to make the best use of animation on the web and when you could consider using a JavaScript animation library instead of CSS-only animation. It then focuses on Anime.js, a free and lightweight JavaScript animation library

What is GreenSock and What Is It Good For?

GreenSock is the de facto industry-standard JavaScript animation platform available today.

It’s a mature JavaScript library that has its roots in Flash-based animation. This means the guys behind GreenSock know web animation inside-out, the library has been around for a long time and is not going anywhere any time soon.

GSAP includes a comprehensive suite of tools, utilities, and plugins you can leverage to handle any web animation challenge you happen to face, from animating SVGs consistently across multiple browsers to coding complex animation sequences, dragging elements across the screen, splitting and scrambling text, and so much more.

To mention just three things I particularly love about GreenSock:

Although the library is mega rich in terms of features, the learning curve is relatively shallow because it uses an intuitive and consistent syntax across all its various implementations and plugins. In addition, it offers awesome documentation, tutorials, and support via the GSAP Forums. Also, the library itself is continually updated and maintained. These are all crucial factors when building a project which relies on an external library for any of its key features and user experience

TimelineLite — a lightweight timeline to take control of multiple tweens and/or other timelines

TimelineMax — an enhanced version of TimelineLite, which offers additional, non essential capabilities like repeat, repeatDelay, yoyo, and more.

You can choose to include TweenLite in your project and then add other modules separately as you need them. Alternatively, you can choose to include TweenMax (the approach I’m going to take in this multi-part series), which packages all the core modules in one optimized file.

It’s also worth noting that GSAP offers some paid extras like the DrawSVGPlugin to create animated line drawing effects with SVGs, the powerful MorphSVGPlugin to morph one SVG shape into another (even without requiring that the two shapes have the same number of points), and others. Although you need to be a paying member of the Club GreenSock to use these plugins, GSAP makes available to you for free a special CodePen-based version so that you can try them out. This is a cool offer I’m going to take full advantage of later on in part 3 (and you with me).

License

GSAP hasn’t adopted a free open-source license like MIT largely for reasons that concern keeping the product’s quality high and its maintenance financially sustainable over the long term.

Standard License — use of the library is totally free in digital products that are free to use (even if developers get paid to build them)

Business Green — this license includes three tiers with the middle tier, Shockingly Green, being the most popular. As a Shockingly Green member you’ll gain access to all the bonus plugins and extras, but without the commercial license.

Despite the non-adherence to MIT and similar free use licenses, by letting you peek into its raw code both on the project’s GitHub repo and in your downloads, GreenSock encourages you to learn from its developers’ code and their mastery of JavaScript animation, which is one of the best features of the open source philosophy.

Tweening with GreenSock

A simple animation consists of some kind of change that takes place over time from point A to point B. Animators have a special name for the states in between A and B, i.e., tween.

TweenLite and TweenMax are the two powerful tweening tools GreenSock puts at your disposal. As I said above, I’m going to focus on TweenMax here, but remember that the basic syntax is the same in both libraries.

To load GSAP in your project, add this <script> tag before the closing </body> tag of your HTML document:

On CodePen, you’ll find the link to GSAP TweenMax in the Quick add box inside the JavaScript Settings:

A Basic Tween with GreenSock: the Syntax

A simple tween with GSAP looks like this:

TweenMax.to('.my-element', 1, {opacity: 0});

The snippet above animates a DOM element with the class of my-element from the current default opacity value to the opacity value of 0 over the course of 1 second. In other words, at the end of a 1-second long tween, the element will no longer be visible.

Let’s go into a bit more detail.

TweenMax.to() tells the browser you’re using the to() method of the TweenMax library (the syntax for TweenLite is the same, only replace TweenMax with TweenLite). This method needs a few comma-separated arguments:

The element you want to animate (‘.my-element’)

The duration of the tween (in this case is 1 second)

The vars object {}, that is, the properties you want to tween (in this case the opacity property). This last part goes into curly braces and takes the form of key/value pairs. The value expresses the final state of the tween. There are also other properties you can use inside the vars object {} like callback functions, delays, etc.

As its name suggests, the to() method animates tweenable properties from their default values to what you want those values to be at the end of the animation.

GSAP offers tons of methods, but the core ones besides to() are:

from() — lets you decide the starting values in your tween. Therefore the element will animate starting from the values you specify inside from() towards its default values, which are usually those you set in your CSS rules. The syntax looks like this:

TweenMax.from('.my-element', 1, {opacity: 0});

fromTo() — with this method, you specify the values for both the starting point and end point in your tween, which affords closer precision. The syntax is similar to the previous methods, but it includes the vars object{} both for the from (opacity: 1) and to parts (opacity: 0):

GSAP breaks away from the CSS syntax by using rotation instead of rotate.

Also, notice that to translate an element along the X or Y axis, GreenSock doesn’t use transform: translateX() or transform: translateY(). Rather, it uses x (as in the live demo), y, xPercent, and yPercent.

While the x and y properties are mostly pixel-based, xPercent and yPercent use percentage values to translate elements along the X and Y axis respectively (CSSPlugin docs).

Finally, keep in mind that to translate the element on the X or Y coordinates, you need to set the element’s CSS position property either to relative or absolute.

Which CSS Properties Does GSAP Animate?

With GreenSock all CSS animatable properties are at your fingertips. You can animate CSS transforms, as discussed above, but also other complex properties such as box-shadow: 1px 1px 1px rgba(0,0,0,0.5) and border: 1px solid red. Just remember to use camelCase wherever the standard CSS property name uses a dash (-), e.g., backgroundColor instead of background-color.

Using GreenSock’s set() Method

If you need to set some properties with specific values before animating them, you can do so either in your CSS or using GreenSock’s set() method. This last option offers the advantage of keeping all your animation-related code in one place, i.e., the JavaScript document.

For instance, the first example in the live demo above starts with the image set in a slightly slanted position. This initial choice is not specified in the CSS document but in the JavaScript document using GSAP’s set() method, like this:

TweenMax.set(toElement, {rotation: -45});

The syntax is the same as a regular tween, but without the duration parameter. This ensures that the change takes place immediately.

Creating Sequences of Tweens with GreenSock

You can create sequences of tweens with GreenSock and coordinate their interaction by adjusting each tween’s duration and delay properties.

For instance, in the code sample below, clicking the Notify Me button triggers the following animation sequence:

An input box appears

As the input box gets longer, the Notify Me button disappears

Finally, a smaller Send button pops into view inside the input box.

Here’s the GSAP code for the sequence (the code goes inside a click handler for the button):

You can use autoAlpha instead of opacity when you need to make sure the element not only disappears from view, but users can’t interact with it. In fact, autoAlpha adds visibility: hidden to opacity: 0.

The ease property lets you choose easings for your animations, which control the rate of change throughout the duration of a tween. This is a crucial ingredient for natural, realistic and smooth animations, and GreenSock offers the Ease Visualizer to give you huge control on the kind of ease that best fits your animation.

After a few tries, I chose the Back.easeOut ease for this particular tween, but you can have a play and come up with something different.

Staggering Animations with GreenSock

The staggering effect consists in applying the same animation to a group of elements. However, the animation affects each element in succession, that is, one element at a time rather than all elements at once.

GSAP TweenMax offers the staggerTo(), staggerFrom(), and staggerFromTo() methods, which work similarly to the methods discussed above. Only the staggering effect is different, and it requires an extra argument just after the vars object {} to indicate the amount of time you want to elapse between each stagger.

Taking Control of Your GSAP Tweens

GreenSock has a few methods up its sleeve to let you take full control of your tweens.

The ones I’m going to consider here are:

play() — plays the animation from wherever the playhead is or from a specific time:

// plays from the playhead's current location
myAnimation.play();
// starts playing from 2 seconds into myAnimation
// (all events and callbacks before then don't get fired)
myAnimation.play(2);
// starts playing from 2 seconds into myAnimation but
// doesn't suppress events or callbacks in the initial
// part of myAnimation (earlier than 2 seconds)
myAnimation.play(2, false);

pause() — pauses your tween, either completely or starting from a specific point:

// pauses myAnimation in all its entirety
myAnimation.pause();
// jumps 2 seconds into myAnimation and then pauses
myAnimation.pause(2);
// jumps 2 seconds into myAnimation then pauses but
// doesn't suppress events/callbacks during the
// initial phase of the tween (earlier than 2 seconds)
myAnimation.pause(2, false);

reverse() — moves your tween backwards to the initial frame, but you can choose to set a specific time to start from before reversing

Maria Antonietta Perna is co-Editor of the HTML/CSS Channel at SitePoint and a front-end web developer. She enjoys tinkering with cool CSS standards and is curious about teaching approaches to front-end code. When not coding for the web or not writing for the web, she enjoys philosophy books, long walks and good food.