GSAP JS Tutorial : Animation Ahoy!
Published :
Author :
Updated :

GSAP JS is fun, interesting, and easy. However, it requires a good approach in order to grasp it perfectly. This tutorial is designed in such a way that when you are through with it, you will only need to refer the official GSAP JS API for a detailed list of methods without looking up the Internet for “how to” questions.

So let’s begin!

1. Get the prerequisites

You need to at least have a decent amount of knowledge on CSS selectors and properties, as that will give you the ability to materialize animations. Further, even a faint idea about the working of jQuery is good enough, though NOT necessary, but it definitely gives more control and variety in the animations. Lastly, since we are basically writing JavaScript, you need some knowledge of that as well. Either way, I’ll be explaining as much as I can throughout the coding part.

2. Visualize a sequence

Before we start writing the animation script, we need to visualize exactly what we need. This is really important because you need to have a direction in order to proceed; otherwise you will be left confused and would rapidly start losing interest. Do not think that it will be too complicated to exactly materialize your imagination, because when you start writing, things will automatically fall into place as you would know exactly what you need and you can then easily look it up in the API if you need to. That will make things extremely easy to manage.

For this tutorial, I have made a sequence in which “Welcome to Medieval Hub” slides in from left, a logo (positioned below the text) slides in from right, then they both interchange their position while swiveling and changing colors, then stagger a little, again interchange their position, scale down, and exit with the text sliding up and logo sliding down.

3. Setup the environment

Now we have the idea, so let’s get cracking. For the purpose of this tutorial only, I’ll be writing the CSS styling and the scripts as well in the same HTML file. This, however, is not a recommended practice for production purposes. In the code that follows, I have included GSAP’s TweenMax CDN file (which includes the entire GSAP JS platform) AFTER the jQuery CDN file. This is because we will be using jQuery as our selector engine and so need to load it BEFORE the GSAP which will use it. Then I wrote the text and included the image. The framework is ready now.



<body>
<div id="demo">
    <div id="txt">
    Welcome to Medieval Hub
    </div>
    <div id="logo">
    <img src="http://sakshamsaxena.in/imgs/ess.png" id="ess">
    </div>
</div>
</body>
4. Styling natural state

Animating an object basically involves methods applied to the existing object in its natural state and position (defined through CSS). These methods can be called to write its "entrance queue" to its natural position, and/or to write its "emphasis" and "exit" queue from thereon as well. Since our demo will involve all these, let's code the style for its "natural" state.


body
{
	background-color:#FFFFFF;
}
#demo
{
	background-color:hsla(0, 55%, 25%, 1);
	position:absolute;
	width:500px;
	height:300px;
	overflow:hidden;
}
#txt
{
	font-family:Algerian;
	font-size:4em;
	text-align:center;
}
#ess
{
	width:100px;
	display:block;
	margin:10px auto;
}
5. Putting on the Greensock

Since we are writing an entire sequence, we require a timeline. GSAP provides with TimelineLite, TimelineMax, TweenLite, and TweenMax. The TimelineMax is a sequence tool acting like a container for tweens whereas the TweenMax is a tweening tool only. As the name suggests, the Max version is fully-featured whereas the Lite version is light-weighted with lesser features and more dependencies. We will be using TimelineMax in this demo.

Defining multiple timelines without any special constructor properties will result in their running simultaneously. This is useful in this demo as we can separately write animations for elements and time it accordingly.


//Creating a timeline for each
var txt_anim = new TimelineMax();
var logo_anim = new TimelineMax();
var bg_anim = new TimelineMax();
//See http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/
//for complete constructor properties
6. The methods

Now we code the entrance queue using the from() method. Although this is the preferred method of adding tweens, another method called add() can also be used, giving the same effect, but with a bit lengthy code. 


Syntax:
from( target(object), duration(number), vars(object), position);

Only the first three parameters will be used in this demo for sake of clarity. target is the object which you want to animate. vars are the properties of the target from/to which we animate. The fourth parameter controls the placement of the tween in the timeline (by default, it's at the end of the timeline). It is useful for long and intricate animations, but won't be using here.

Similarly, when the from() method is complete, the to() method is initiated. It is similar in syntax to that of from(). The code is now updated. Go through each tween carefully.

Staggering is noticeable when multiple targets are selected, i.e., an array of targets. In the following code, the staggering is not visible as such and the regular tween is rolled. Also, the fromTo()method can also be applied here to further reduce the code (not shown). Please refer to the API for more information. 

//Creating a timeline for each
var txt_anim = new TimelineMax({repeat:-1,repeatDelay:5});
var logo_anim = new TimelineMax({repeat:-1,repeatDelay:5});
var bg_anim = new TimelineMax({repeat:-1,repeatDelay:9});
//See http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/
//for complete constructor properties

//Writing the sequence which will run
//when the window is completely loaded.
window.onload = function(){
txt_anim
	.from("#txt", 2, {x:"-500px",ease:Bounce.easeOut})
	.to("#txt", 2, {y:"140px",skewX:180,ease:Elastic.easeIn,delay:0.5})
	.to("#txt", 1, {skewX:-360,ease:Quad.easeIn,delay:1})
	.staggerTo("#txt", 1, {y:"0px",scale:0.8,delay:1},0.02)
	.to("#txt",1 ,{y:"-300px",autoAlpha:0,delay:1});
	
logo_anim
	.from("#ess", 2, {x:"500px", ease:Bounce.easeOut})
	.to("#ess", 2, {y:"-160px",skewX:180,ease:Elastic.easeIn,delay:0.5})
	.to("#ess", 1, {skewX:-360,ease:Quad.easeIn,delay:1})
	.staggerTo("#ess", 1, {y:"0px",scale:0.8,delay:1},0.02)
	.to("#ess", 1, {y:"300px",autoAlpha:0,delay:1});

bg_anim
	.to("#demo", 1, {backgroundColor:"hsla(53, 90%, 85%, 1)",delay:5.5});	
}

The three timelines are working simultaneously, and so the timing of queues is of essence. As you can see, the background changes color only once in the entire sequence, and so it's delay value is set to the time when the text and logo skew to normal. If you look closely, you will observe that the delay is calculated by adding the delays and durations of previous queues plus the delay of current queue. Similarly, the repeatDelay is set so that the total animation time (including repeatDelay) of all the timelines is same(which is 15.5 sec in this case).

7. The result

You can see the end result here. Most of the code (rather the entire thing) would seem simple to an intermediate JavaScript programmer and definitely a piece of cake for a jQuery user. Either way, the traditional way of writing CSS animations using the @keyframes rule is a tedious and limiting way and GSAP JS does make it a lot easier. For simple animations involving less objects and tweens, the .animate() method of jQuery is good enough for those who want no extra library to load, but when it comes to competitive animation, GSAP is the secret weapon!

I hope you found this tutorial helpful, and would love to answer any query/correction/aliter regarding it. You may also refer to the official Jump Start guide of GSAP here