Starting with GSAP

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 3 adjectives fast, robust and compatible just think that 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 basic 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 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, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. This library lets you chain multiple animation properties, synchronize multiple instances together, create timelines and much more.

GSAP is one of the premiere 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 dubug 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.

Which one to chose?

It depends on what you have to animate, in my opinion if you have to do simple animations Anime.js can be fine but if you need to do complex animations you definetely need to use GSAP because it’s more powerful.

Useful resources to start with GSAP

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 includes almost everything so let’s use that.

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

You can find all the official CDN here.

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().

TweenMax.to()

It is 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 define the value where the tween should move, in this object usually we add css properties.

TweenMax.fromTo()

It is a static method for creating a TweenMax instance that allows you 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 2 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.

TweenMax.staggerTo()

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.

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 would like to go depth 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 to start fast and to end slow and so on.

GSAP has a very good 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 to read the documentation here.

It’s time to do something funny!

Well if you have read all so far I think you are really interested to go 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. I would like to say that GSAP become very powerful when you understand 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});

Isn’t that cool? After that I hope that I gave you some inspiration 😉

Now it’s your turn, read the documentation, imagine some animation that you would like to do, use your creativity to think how you could build it and play around also starting from the examples above in codepen.

Good luck 😃