A web design and development studio

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:

TweenMax.from

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.

TweenMax.to

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.

TweenMax.fromTo

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
TweenMax.to(
	element,
	1,
	{ 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. 

TweenMax.to(
	element,
	1,
	{ 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”:

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

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

TweenMax.to(
	element,
	1,
	{ 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

With a Response Rate of Zero, Our Spring Sales Drive Could Not Be Off to a Hotter Start

Feral sales illustration post

Throughout our careers we've always aimed for the stars, but we never could have imagined this...


Feral © 2019.