A Step By Step Guide To The GSAP Animation Library -Part 2-
What is GSAP ?
Why should I use it ?
What are the main components of it ?
What are GreenSock, TweenLite and TweenMax ?
Different questions might have surrounded your mind if you stumbled upon a video or a blog post talking about the library (especially if you’re a new to the world of web animation), but don’t worry I have already answered all of them in my previous article A Step By Step Guide To The GSAP Animation Library -Part1-, so make sure to take 6 minutes of your time reading it before diving into this one.
As I have already covered 2 of the fundamental parts of the suite which are TweenLite and TweenMax in the previous article, in this one I’ll be focusing on another 2 which are TimelineLite and TimelineMax, so no further talking, let’s get started !
Let’s start by creating an animation of the square1 and square2 swaping places using what we’ve learned in the previous post
As you can see from the code I’ve just typed, I wanted the first square to go up and the third one to go down then a translation on the X axis had to happen, then another one on the Y axis so the squares go back to 0 on the Y axis which we can’t see right now because all of the changes are happening
at the same time.
If we want to see the steps one after the other, we need to delay each change so it can take place only after the end of the previous one. The delay of each sequence should be the same as the sum of previous animations’ duration
For a small animation like this, this code should be enough but for more complex animations, this could turn into a big insolvable puzzle with a lot a unreadable and repetitive code, and that’s where TimlelineLite and TimelineMax come in handy.
TimelineLite
First things first, you should use npm or a CDN hosted version of TimelineLite or TimelineMax, simple step to do yet there’s a very important thing to mention is if you want to use TimelineLite/TimelineMax you have to also add either TweenLite + CSSPlugin or TweenMax to your project, if you don’t nothing will work !
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script><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/TimelineLite.min.js"></script>
Or
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>Now we only need to create a new instance of TimelineLite and then remove all the delays, and that should be enough to create the same animation.
We have control of when any of the sequences can take place, let’s say for instance that we want the second sequence to take place at 0 second from the beginning
As you can see now the second sequence start at the same time as the first one (at 0 seconds).
Let’s do the same with the fourth sequence (we want the 4th sequence to start at 0 seconds)
We can also use the += or -= signs to add a delay relative to the previous animation’s end time
In this case I used -=1 which makes the change start 1 second before the previous animation’s end, so basically both of the changes start at the same time.
-=0 is the default behavior where there is no delay
+=1 means that the change occurs 1 second after the end of the previous change
If I use a simple integer without the equal sign, that means the starting time of the change is relative to the start of the whole timeline, so 1 here means the change has to occur 1 second after the start of the whole animation
We can reverse the animation by using the reverse method, so we can see the animation taking place from the end state to the initial one
There’s also the play method which you can use to specify where exactly you want the animation to start, making it possible to skip some sequences
We can specify when an animation can take place despite of its order inside the code. Using delays in this case can be confusing as I mentioned earlier, that’s why a handy method can be used to solve this problem which is addLabel
As you can tell by its name, this method uses a label that figures in the chosen sequence then uses it as it’s the real sequence taking place. addLabel takes 2 arguments, the label name and the time where the sequence should trigger.
-=0 changes the order of the last animation to the third one (in the provided example of course).
Using 0 makes the sequence start at the very beginning as you have already guessed because using a simple integer without the equal sign makes the timing of the change static or relative to the beginning of the timeline as a whole
The label can be used also as a reference for the play method
We can nest a timeline inside another one using the add method which can be useful for advanced and complex animations
TimelineMax
TimelineMax is the big brother of TimelineLite if I can say, the relation between the two is the same as the relation between TweenLite and TweenMax, what I mean here is that TimelineMax includes TimelineLite and adds more features on it.
We need to include TimelineMax into the project first:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script><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/TimelineMax.min.js"></script>
Or
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>The first additional feature provided by TimelineMax is repeat, which repeats all of the sequences as many time as we want to, for instance 1 will repeat the animation one more time after it occurs once. 2 will repeat the animation twice after the initial occurrence. -1 though will repeat the animation infinitely
yoyo is another extra feature provided by TimelineMax which will make the animation repeat from the starting state to the final one and vice versa
With TimelineLite we can specify at which point the animation trigger using the play method, but what if we wanted the reverse of that, what I mean here is what if we want the animation to end at a certain point, well the answer is provided also by TimelineMax with the tweenTo method
We also can do both, meaning that we can specify where the animation can start and where it should finish using the tweenFromTo method
NB: I used a label in both of the previous examples but you can still use integers or both of them at the same time.
You can take a look at the documentation for way more additional methods and functions provided by 2 the timelines. Also to mention, there’s a very powerful tool that makes debugging animations way easier which is the GSDevTools, but you should have a paid subscription to make use of it.
Well this guide should end here, I hope I succeeded to provide some valuable information about the different points of this article especially for people who are getting started with the library.
See you in a next one and until then I wish you happy tweening !
