A Step By Step Guide To The GSAP Animation Library -Part 1-
Web animation is where the fun and professionalism fusion, nothing is more satisfying to watch on a web page than a smooth and beautiful animation of some elements which in return can be convincing and leading visitors to buy, subscribe or whatever call to action you have on your page.
Different techniques can be used to achieve cool animations on the web which I’ve already covered the fundamentals of them in the couple of my previous posts Web Animation With CSS -Transition- and Web Animation With CSS -Keyframes-. Both of these articles were made to cover the basics of the animation tools provided by CSS.
The question here is “are CSS transitions and keyframes enough to create cool animations ?”, the answer is definitely YES ! “okay then, are they enough to make the greatest animations”, the answer is also yes BUT it would need a heck of exhausting work to do, not only that but a lot has to be taken in consideration like performance, compatibility, debugging etc... not to mention how many days or even weeks it would take to achieve some complex animation.
“So, what should be done to create amazing animations without the fear of falling into a vortex of worries about long time coding, compatibility, hundreds of line of code and all of that ‘expensive’ work ?”, well the answer is simply Javascript, more precisely a Javascript library, or let me just say GSAP !
What Is GSAP ?
GSAP stands for GreenSock Animation Platform, created by the Greensock team. It’s one of the best web animation libraries if it’s not the best.
Why GSAP ?
If you look for :
- a crazy fast and performant animation library;
- a library that is armed with a tremendous amount of features to help you achieve beautiful animation no matter how complex it could be;
- a library that is compatible with every browser and with various frameworks and libraries;
- a library that can almost animate every single property of an element;
- a lightweight and expandable library and not dependent on any other 3rd party tools like Jquery;
Well then GSAP must be your choice !
GSAP Tools
GSAP is basically a suite of 4 major tools plus extra plugins.
TweenLite
The lightweight core of the engine which animates any property of any object. It can be expanded using optional plugins.
TweenMax
Includes a package of features without the need to import them one at a time (TweenLite included).
TimeLineLite
Sequencing tool, making it simple to control entire groups of animations and precisely manage relative timing.
TimeLineMax
Same as TimeLineLite but with more features.
Plugins
As I mentioned before a variety of plugins can be added to these 4 tools to add extra features.
How Does GSAP Work ?
Including The Library
The first step to use GSAP is to include it to the project files. To do so we can download the files using npm or simply use a CDN hosted version.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
Important: If you consider using TweenLite you should also include the CSSPlugin link, it’s crucial for TweenLite to work.
Declaring A Tween
A tween in GSAP is similar to keyframes in CSS, you just create an animation then add it to an element, so to create a tween we can do it in 3 different ways:
The Different Components Of A Tween
Element: it’s literally the element that we want to animate. It can be a simple variable or constant, it can be an array of elements that we want to animate all together or a nodelist.
Duration: represents the duration of the animation.
Vars: it’s an object that contains the different properties that we want to change over the duration. It also holds different other properties and callback functions. The properties to change are the same as CSS properties with some exceptions like transforms, if we want to use transform: translateX(200px) we can simply type:
As you can see by default the unity of measurement is pixels, we can set it explicitly by using a string instead of an integer:
Speaking of percentages we can use the xPercent property to do the same thing:
Important: Even though a lot of the properties have the same name as CSS properties the naming style is different, GSAP uses the camel case style to name its properties, so if we want to change the background color for instance, we should type backgroundColor instead of background-color.
There’s also a very useful property exclusive to GSAP which is autoAlpha. autoAlpha is basically a combination of 2 CSS properties (opacity and visibility). autoAlpha: 0 is same as opacity: 0 and visibility: hidden in CSS, while autoAlpha: 1 in GSAP is same as opacity: 1 and visibility: visible in CSS.
Method: TweenLite has 4 basic methods (out of total of 32 method), they work very similar to the animation-direction in CSS.
The first method is To, this method sets the values of the properties in the vars object as the final state of the element we want to animate.
The second method is set which is almost the same as the previous one except that it changes the different properties instantly that’s why we need to get rid of the duration (the argument). We can do the same using the to method by setting the duration to zero.
The third method is from which is the reverse of to, this method sets the values of the properties in the vars object as the initial state of the element that we want to animate.
The fourth method is fromTo method which is a combination of the to and from methods,with that in mind we need 2 objects which represent respectively the initial and final states of the element.
Now let’s take a look at a few of the vars properties.
The first one is ease which is the timing function, we can use different values going from Power0 which is the less intense to Power4 which is the most intense. We can use different easing functions including custom ones that you can create on the GreenSock’s website where they have a powerful tool called the GreenSock Ease Visualizer which can help you out with experimenting with different easing functions and also creating custom ones.
Examples: Power0.easeIn, Power3.easeIn, Power2.easeOut etc…
onStart is a very useful property which takes a function that triggers before the animation start:
There’s also onComplete which triggers a function right after the end of the animation:
delay, this property delays the animation for a certain amount of time:
You can find a lot of other useful properties in the GSAP documentation at the GreenSock official website make sure to take a look.
Dynamic Values
Up until now we have been setting the same values to the elements properties, however we can give random numbers using a function that returns a dynamically calculated value specific for every single element.
We also can use a function to give each element of the array/nodelist’s items a value depending on its index in the array/nodelist, by using the index argument of the function. The index has the elements indexes in the array/nodelist starting the count from 0, so the first element of the array/nodelist has 0 as index.
Now let’s take a look into the TweenMax part.
TweenMax includes TweenLite and CSSplugin so once you use the link to TweenMax you can can get rid of the CSSPlugin’s link.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>TweenMax has 13 additional methods over TweenLite, here are 3 of them.
The first method is staggerTo which is similar to the to method
except that this one animates each of the elements in the array/nodelist
after a certain delay that we can specify in the stagger property inside of the vars object.
The second additional method is the staggerFrom which is the reverse of the StaggerTo method, meaning that the values of the properties in the vars object represent the initial state of the element.
The third additional method is staggerFromTo which is the combination of the 2 of previous methods.
Now let’s see some additional vars properties provided by TweenMax.
The first one is repeat which you can use to specify how many times the animation can take place, you can use a positive number to specify how many repetitions can take place or use -1 to make an infinite number of repetitions.
The next property is yoyo which makes the animation goes from the initial state to the final one and vice versa.
Another property which can be used only with the stagger methods is cycle. This property takes an object that holds the different properties we want to animate, then these properties take arrays as values, each array has to contain one or more values that can be repeated over the different elements, in other words we’re creating a pattern with the array values.
This should be enough for this article, I’ll cover other parts like TweenLineLite and TweenLineMax and other features in future article(s), up until then, I wish happy tweening !
