Starting with GSAP
Let’s Create Amazing Animations with the GreenSock Animation Platform
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().
TweenMax.to()
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.
TweenMax.fromTo()
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.
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 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});
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!
