To get the most out of this article it is important that you have a solid understanding of JavaScript. We will be solely focusing on understanding GreenSock in this article, so if you haven’t used JavaScript before then get learning and come back!
GreenSock is a JavaScript animation library that saves us a lot of pain when creating our animations especially when it comes to cross browser capability. GreenSock can also be called GSAP (GreenSock Animation Platform) and I will use both interchangeably. GSAP can basically animate any property you throw at it, ranging from CSS properties to SVG attributes.
GSAP has multiple tools you can use, which include:
GSAP can be installed as an npm
module:
$ npm install gsap
Or loaded through a script tag:
<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js>"></script>
To demonstrate GreenSock I am going to use Codepen. You can fork the pen here which has GreenSock already set up.
Let’s start off basic and animate a red square across the screen using GSAP’s to
method. We create the red square like so:
<style>
#element {
height: 150px;
width: 150px;
background: red;
}
</style>
<div id="element"></div>
To animate this we pass 3
arguments to the to
method, the arguments are:
.to(elToAnimate, duration, propToAnimate)
So in our case the element we want to animate is #element
, the duration is 1
second and since we want to move our square our final argument is an object targeting the x
property. Our code is:
TweenMax.to("#element", 1, { x: 100 })
This gives us the following:
Don’t worry about the gif, it’s much smoother in real life, as you’ll see on Codepen!
Let’s say now we want to rotate our square, all we need to do is:
TweenMax.to("#element", 3, { rotation: 360 });
You can make this rotation
infinite by adding repeat:-1
to our object. You can also add in the yoyo
property which will alternate the animation between backwards and forwards.
We can start from a different position using the fromTo
method. This is similar to the to
method but we can supply an extra object of where we would like our animation to start. If we wanted our square to begin at x:300
then we pass this as the third argument to fromTo
.
Code wise this looks like as follows:
TweenMax.fromTo("#element", 3, {x: 300}, { x: 100 });
Visually:
We can do more than change the position of our square, we could also target something like the opacity:
TweenMax.fromTo("#element", 5, {opacity: 0}, { opacity: 1 });
Again we use the fromTo
method and start our opacity
at 0
and finish on 1
.
Ok, I’m sure you are incredibly uninspired right now as let’s be honest the above is quite boring. Let’s do something more interesting, we’ll use the Alligator.io
logo and do something cool!
I stole the Alligator.io
logo from the website, hope Seb doesn’t mind. Here is the starter pen with our SVG inside.
So our goal with this animation will be to draw
the logo and fade in the green color.
The first thing we need to do is set a stroke-dasharray
and stroke-dashoffset
on our graphic. These are the attributes we use to simulate a drawing effect, you can read more about these properties here.
In our CSS we set the following:
#alligator path {
stroke-dasharray: 600;
stroke-dashoffset: 600;
fill-opacity: 0; // we will animate the fill in
}
With this in place, our alligator has now disappeared. Let’s go animate it back in using TweenMax
.
We use the to
method which we used above, then we set our stroke-dashoffset
to be 0
.
TweenMax.to("#alligator path", 15, { "stroke-dashoffset": 0 })
We use the same selector we used in our CSS #alligator path
, set a duration of 0
and then set our stroke-dashoffset
to 0
. This gives a really cool drawing effect:
How cool is that?!! ✨
Now the next thing we need to do is get our color back in. We do this by adding an extra property to our object.
TweenMax.to("#alligator path", 15, { "stroke-dashoffset": 0, "fill-opacity": 1 })
The problem we currently have is that the duration is quite long and this looks a little weird with the fill-opacity
property. Ideally what we want is to first draw, then when that finishes we’ll fill in the graphic. The old way to achieve this was to have two separate animations with the second animation having a delay that matches the first animation’s duration. GreenSock gives us the great TimelineMax
which does this for us.
The first thing we need to do is create an instance of the TimelineMax
class like so:
const tl = new TimelineMax()
Then we call the to
method on our instance and pass it our drawing effect:
tl.to("#alligator path", 10, { "stroke-dashoffset": 0 })
Then we call the to
method again but this time for our fill-opacity
:
tl.to("#alligator path", 5, { "fill-opacity": 1 })
With that in place we then get the following:
TimelineMax
is extremely powerful and this is just scratching the surface, creating sequential animations has never been easier!
This is a nice quick intro into GreenSock and the most common methods. It’s a really powerful tool and if you enjoy making animations then you should really consider using it for your next project!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.