Starting with GSAP

Let’s Create Amazing Animations with the GreenSock Animation Platform

Luca Spezzano
Oct 30, 2019 · 6 min read
Image for post
Image for post
Drawing by Solazzo Nicola

The GreenSock Animation Platform (GSAP) is a suite of tools that allow you to create scripted animations, and it can be used safely also back to IE6!

We can define GSAP with three adjectives fast, robust and compatible, over 4 millions of websites are using it.

The main components of GSAP

TweenLite (28 KB minified) is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform. TweenLite can be used on its own to do most of the necessary animations.

TweenMax (116 KB minified) is like TweenLite’s big brother, it is doing everything TweenLite can do, but it can do something more like repeat, yoyo, repeatDelay, updateTo, and much more. TweenMax includes: TweenLite, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, and BezierPlugin. The focus is on being full-featured.

TimelineLite (13 KB minified) is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them and manage their timing. Without TimelineLite, building complex sequences would be complicated because you’d need to use the delay property for every tween.

TimelineMax (21 KB minified) extends TimelineLite, offering exactly the same functionality but it can do more things like repeat, repeatDelay, yoyo, currentLabel(), addCallback(), removeCallback(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), and getActive().

What should you use now? Use TweenMax and you would be fine 😬

TweenMax contains all the libraries, so you don’t need to think about what to include or not. In my opinion, when you decide to use GSAP, you need to use the most powerful functionalities!

GSAP vs Anime.js

One of the most famous alternatives to GSAP is Anime.js

Anime.js is a lightweight (6.2 KB minified) open-source JavaScript animation library. It has over 20K stars on Github. Anime is a JavaScript animation library that works with CSS Properties, CSS transforms, SVG or any DOM attributes, and JavaScript Objects. This library lets you chain multiple animation properties, synchronise numerous instances together, create timelines and much more.

GSAP is one of the best JavaScript libraries for web animators. You can create all kinds of stunning effects, including those that require SVG support. It can do the same things as Anime.js but has the most high-performance, zero dependencies, cross-browser animations. GSAP is flexible and works with React, Vue, Angular and vanilla JS. GSDevtools can also help debug animations built using GSAP.

You can compare the performance of various JavaScript libraries (jQuery, Anime.js, Popmotion, Just Animate, WAAPI, CSS transition, Mo.js, Zepto) vs GSAP here.

If you have to do simple animations, Anime.js can be fine, but if you need complex animations, GSAP is for you because it is more powerful.

Getting started

Let’s start with some examples using different methods and try to notice the differences.

At first, you have to include the GSAP library, as I said previously, TweenMax is the most powerful and it covers almost everything, so let’s use it.

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

Now we have to define the element that we want to animate with a class or an id

<div id="rectangle"></div>

Let’s define some CSS property to make the rectangle visible

#rectangle {
position:relative;
width: 120px;
height: 100px;
background-color: red;
}

Now let’s animate, but at first, let’s explain something, TweenMax has many methods, but in this article, we will see only 3: TweenMax.to(), TweenMax.fromTo(), TweenMax.staggerTo().

It is a Static method for creating a TweenMax instance that animates from the current values to the specified destination values.

TweenMax.to(“#rectangle”, 2, {
left:100,
});

Here there are the parameters that usually are used: target(#rectangle), duration(2) and vars({ left:100}).

Target: it can be an object, an array of objects or a string whose properties should be affected, so it’s the element that we want to animate.

Duration: it should be a number and it would be the duration in seconds.

Vars: It is an object that defines the value where the tween should move, in this object usually we add CSS properties.

Codepen Starting with GSAP TweenMax.to()

It is a static method for creating a TweenMax instance that allows you to define both the starting and ending values.

TweenMax.fromTo(“#rectangle”, 2, {
left:400,
},{
left:0,
});

How you can see the main difference from TweenMax.to() is that in this case, we have two vars objects.

fromVars: It is an object defining the starting value for each property that should be tweened.

toVars: It is an object defining the end value for each property that should be tweened.

Codepen Starting with GSAP TweenMax.fromTo()

It tweens an array of targets to a common set of destination values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.

For staggerTo you need to change a little the HTML, CSS and JS that we wrote previously

<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
<div class="rectangle"></div>
.rectangle {
position:relative;
width: 120px;
height: 100px;
background-color: red;
margin: 10px;
}
TweenMax.staggerTo(".rectangle", 2, {
left:400,
},0.5);

How you can see the main difference from TweenMax.to() is that with staggerTo() we have one more parameter and it is the stagger(0.5).

Stagger: it should be a number and it is the amount of time in seconds to stagger the start time of each tween.

Codepen Starting with GSAP TweenMax.staggerTo()

It sounds good? Well I described only 3 methods but the are much more for example: .play(), .pause(), .restart(), .repeat(), .TweenMax.set(), .TweenMax.staggerFromTo(), etc. or many interesting properties like: onComplete, repeat, ease, delay, etc.

I want to go deep with the ease property because it is what separates the top-notch animators from the hacks.

Ease: it is a property that you can add to the vars object and it would define the movement of the animation. For example, if it should start slow and end fast or start fast and end slow and so on.

GSAP has an excellent tool for the ease property and it is called visualizer where you can play around and choose the best ease for your animation and it will give you the code to use.

By the way, to discover more about all methods and properties, I suggest you read the documentation here.

Let’s have fun!

Well if you have read all so far, I think you are interested in going deep with GSAP. Above we did basic animations, but now it’s time to do something more complicated and funny using also the TIMELINE.

This would be only an example that would let you understand how powerful can be the Timeline of GSAP. GSAP becomes very powerful when you know its features well and when you start to use your creativity.

Let’s animate!

<div class="line line--top"></div>
<div class="line line--right"></div>
<div class="line line--bottom"></div>
<div class="line line--left"></div>
<div class="mask"></div>
<h1 class="text">GSAP is awesome!</h1>
body {
position: relative;
min-height: 100vh;
background-color: #000;
padding: 0;
margin: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.line {
position: absolute;
background-color: #000;
z-index: 2;
}
.line--top {
top: 0;
left: 0;
width: 0;
height: 5px;
}
.line--right {
top: 0;
right: 0;
height: 0;
width: 5px;
}
.line--bottom {
bottom: 0;
right: 0;
width: 0;
height: 5px;
}
.line--left {
bottom: 0;
left: 0;
height: 0;
width: 5px;
}
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fff;
z-index: 1;
}
.text {
color: #fff;
opacity: 0;
}
var tl = new TimelineMax({repeat:-1, repeatDelay:1});
tl.to(".line--top", 0.6, {width:"100%", ease: Power2.easeIn})
.to(".line--right", 0.6, {height:"100%",ease: Power0.easeNone})
.to(".line--bottom", 0.6, {width:"100%",ease: Power0.easeNone})
.to(".line--left", 0.6, {height:"100%",ease: Power2.easeOut})
.to(".mask", 1, {left:"100%"})
.to(".text", 0.8, {opacity:1});
Codepen GSAP animation

This animation is cool right? I hope that I gave you some inspiration, now it’s your turn.

Read the documentation here, imagine some animation that you would like to create, use your creativity and start to play around.

You can start changing the values of the Codepen above to see how it works.

Good luck and have fun!

NotOnlyCSS

This publication includes original articles and tips about…

By NotOnlyCSS

Articles and tips for frontend developers Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Luca Spezzano

Written by

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.

NotOnlyCSS

This publication includes original articles and tips about frontend technologies.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store