A Quick Start to GSAP Animation Library
The aim of this article is to give you a basic idea of what GreenSock Animation Platform is all about, you might have heard about it or maybe seen it in action but have no idea how it actually works.
This guide will show you how to set up and use GSAP’s TweenMax feature.
Before coding, we need to load the GSAP library into our HTML, to do this we’ll need to get the CDN link.
Copy and paste it at the bottom of your HTML, but make sure it’s above your main js script where you’ll be doing all the animation.
With that done we can now proceed with the coding.
We’ll start by creating our first TweenMax.to tween. The two methods of TweenMax(which are TweenMax.to & TweenMax.from) allow us to specify the target, which is the object we’ll be animating, the duration and the properties.
In this case We’ll be using an empty div with a circlar shape.
Important Note: For the animation to work, the element which you want to animate must have a CSS property of position: relative, fixed or absolute.
So basically, TweenMax will animated any DOM element that has a class of circle. Cool right?
But what about if we want the element to animate from a specific origin to its original origin? That’s where TweenMax.from comes in play.
Let’s switch it and see how it works.
Animating Multiple Elements with a Single Tween
Let’s assume we have four divs with the class of box, we’ll target these boxes the same way we did with the previous element.
Most of the time you’ll want these elements with the same class to animate one after the other, right? There is also a way for that. We use the staggerFrom method instead.
Do something when animation finished
Let’s fade these boxes when the animation is done running
GSAP has a very robust callback system that allow us to fire off functions in respect to different events that happens through out the life of our tween
For example if we want to fire off a function when the tween is done running, we can pass on a property called onComplete and then specify the function we’d like to fire.
It’s a very robust library, and to get the best out of it you’ll need something more than what we did here. I suggest checking out the Greensock’s website to learn more about the library and experiment with different animation techniques.