Go ahead and start with an ice cold show­er cuz the tip of this episode is gonna be hot! 

In this arti­cle, I’m going to be show­ing you a lit­tle about how to craft ani­ma­tions using the amaz­ing GSAP library.

If you’ve nev­er ever heard about this beau­ty, it’s the per­fect moment to mosey over to the GSAP Library itself. 

GSAP, or Greensock Ani­ma­tion API, com­bines ani­ma­tion capa­bil­i­ties and per­for­mance in a friend­ly API. With this library, the pos­si­bil­i­ties are as big as the result­ing file size is small. The sky tru­ly is the limit. 

To demon­strate GSAP’s super­pow­ers, I’ll split this tuto­r­i­al into three parts, each demon­strat­ing a dif­fer­ent loader ani­ma­tion that uses some ele­ments of the API

Here are the three lit­tle piggies. 

3 dots

Boun­cy ball

Infi­nite symbol

Long sto­ry short

Before we begin, I should tell you about the 4 libraries inside GSAP

  • Tween­Lite
  • Tween­Max
  • Time­lineLite
  • Time­line­Max

The Tween is used to cre­ate sin­gle ani­ma­tions. The Time­line is used to chain ani­ma­tions, allow­ing us to devel­op a con­tin­u­ous flow.

The suf­fix­es Lite and Max are there only to dif­fer­en­ti­ate the amount of fea­tures present in each library.

Installing GSAP

There are many ways to accom­plish this sacred deed:

  • Down­load the .zip file direct­ly from their web­site
  • Include the CDN url for the script
  • Use npm install gsap

My pref­er­ence is to always take the quick­est, eas­i­est path (not just here, but in life) so let’s use a CDN approach by plac­ing the Tween­Max script into our code (don’t tell any­one: this is the one that con­tains all the libraries).

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

OK, done.

Get­ting our hands dirty

For our first loader, let’s cre­ate an ani­ma­tion of a square becom­ing a ball and vice ver­sa. I mean, is there any­thing more excit­ing than that?

Start by cre­at­ing the HTML and the CSS.

<div class="square-ball"></div>
<div class="square-ball"></div>
<div class="square-ball"></div>

For the CSS, I like to first reset the ele­ments. Then, I cen­ter every­thing using flexbox.

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #C7D3BF;

Final­ly, we add some style to these bor­ing squares.

.square-ball {
	width: 40px;
	height: 40px;
	background-color: #04A777;
	border: 5px solid #048962;
	transform: rotate(45deg);
	margin: 0 15px;

With every­thing set, let me take a moment to tell you more about the library. 

The bread and but­ter of GSAP

The sim­plest ani­ma­tion of the library is called a tween, which is noth­ing more than a sin­gle behav­ior in the animation.

Tween syn­tax looks like this:

TweenMax.method(element, duration, props)
  • method is the GSAP method we’re going to use for the animation
  • element is the ele­ment we’re going to ani­mate. This could be an array of ele­ments as well.
  • duration is mea­sured in sec­onds and it’s an inte­ger number.
  • props is an object with css prop­er­ties used in the animation. 

To con­tex­tu­al­ize what we’re going to do next, let me take you through some GSAP basic methods:


Ani­mates the ele­ments from val­ues you pass via the props argu­ment to the ele­men­t’s cur­rent CSS properties.


Ani­mates the ele­ments from the ele­men­t’s cur­rent CSS prop­er­ties, to the val­ues you pass via the props argument.


Ani­mates the ele­ments sole­ly using val­ues passed via the props argument.

A lit­tle about props

The props argu­ment is an object that spec­i­fies the CSS prop­er­ties to use in the ani­ma­tion. To use it, you first need to for­mat the usu­al CSS prop­er­ties with camel case

For exam­ple:

var props = { backgroundColor: 'red', borderRadius: '50%'}

You can also ani­mate trans­for­ma­tions. For that, the prop­er­ties are a bit different:

var props = {
	x: 100, // It's equivalent to translateX
	y: 100, // It's equivalent to translateY
	rotation: 45 // It's equivalent to rotate, and it's in degrees

Keep in mind, this is how the axes work for those trans­for­ma­tions. This is a very impor­tant detail.

Here we go. Animat­ing our loader!

Now that we cov­ered the basics of the library, let’s put what we’ve learned into action. 

We begin by select­ing the ele­ments we want to animate:

var element = document.querySelectorAll('.square-ball');

Then we cre­ate a tween using the method .to() and add a time of 1 sec­ond for the animation.

TweenMax.to(element, 1, {});

Now we add the prop­er­ties. Here we spec­i­fy what final state we would like to achieve:

  • Scale down to 60% of its size
  • Have round­ed bor­ders, i.e. become a ball
  • Spin
	{ scale: .6, borderRadius: '50%', rotation: 360});

Cool, we have our first ani­ma­tion up and run­ning. How­ev­er, note that the ele­ment is ani­mat­ed only once. Let’s change that by adding the repeat prop­er­ty and pass­ing down the val­ue -1.

This val­ue tells our ani­ma­tion to repeat forever. 

	{ scale: .6, borderRadius: '50%', rotation: 360, repeat: -1});

Even though it’s repeat­ing, there is some­thing off. The ani­ma­tion is not flu­id. Each time, it starts from its orig­i­nal state: a square. 

To fix this, let’s use the mag­i­cal prop­er­ty yoyo: true. That prop­er­ty says to the ani­ma­tion Dude, when you fin­ish, retrace your steps back to the begin­ning and start again”:

	{ scale: .6, borderRadius: '50%', rotation: 360, repeat: -1, yoyo: true});

For fun, let’s delay the repeat with repeatDelay:

	{ scale: .6, borderRadius: '50%', rotation: 360, repeat: -1, repeatDelay: .5, yoyo: true});

voilà! We have our first loader. 

Stay tuned for the next episode of this series. We’ll be jump­ing into the deep, open ocean that is the Time­line­Max library. Who knows if we’ll make it out alive. 

If you made it this far, you may also like

Creating an infinite gallery with vanilla JS

Feral stylin with thiago

In the maiden voyage of Stylin', I'll show you how to build a simple, smooth gallery using just a couple lines of code.