If you’ve read some of my tutorials and have no idea what the GreenSock Animation Platform is, this is a quick article for you.
This is intended as a super simple primer to show the basics of tweens and timelines. It’s not intended as a complete guide for getting started with GSAP. I’ll be publishing those tutorials in the near future and when done, will update this post with the article links.
What is GSAP?
GSAP (GreenSock Animation Platform) is a set of JavaScript files you add to your project. For the sake of this tutorial, I’ll assume you’re creating a standard web page. To include the core files, you would add a <script> tag right before your closing <body> tag like this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
What does GSAP do?
GSAP’s core function is to animate values. For example, GSAP will animate the translate x position of a div from 0 → 100 pixels over any duration you choose and will do so with stunning accuracy. You tell GSAP to do this by creating a tween. We’ll do that in a minute.
It is JavaScript and that does scare some people, but fear not, the syntax is very easy to learn. Personal note: I learned GSAP first and JavaScript second. Using the tools will lead to a better understanding of JavaScript. At least it did in my case.
Does it render?
This is a commonly asked question and the answer is no. All the rendering is done by the browser. GSAP will not magically make your renders faster. If you have 1,000 divs or hi-res images to animate, the browser can still struggle with those situations. GSAP animates values only.
Make something move
Let’s assume a really simple web page with a div and a little style applied to it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Your Page Title</title>
<style>
#target {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #5cceee;
color: white;
}
</style>
</head>
See the Pen GreenSock 5 Minute Quick Start Empty by Craig Roblewsky (@PointC) on CodePen.
Okay, so far so good. Just a little div sitting there doing nothing. Let’s tell GSAP to make it move for us. We want it to move to the right a little bit, down some and scale up in size. Heck, let’s get crazy and make it rotate too. All this can be done with one tween.
At the bottom of the page (after we load GSAP), we add another <script> tag and then the following:
gsap.to("#target", {
duration: 1,
translateX: 200,
y: 200,
rotation: 360,
scale: 1.5
});
What’s that all mean? You start the tween with gsap.to which says, “Hey gsap, I want you to animate my target to these coordinates.” You’ll see the “#target” div is the target of the tween. We don’t need to declare a variable to make GSAP work for us. You can target an ID or a class this way.
All the magic happens between the curly braces (also known as the vars). We’re saying to move the div to an x position of 200, y position of 200, rotate 360 degrees and scale up to 1.5 times the original size. Do all this over the course of 1 second.
Notice for the x position, I wrote translateX? If you’re used to CSS animations, that may seem more familiar to you. x/y are just shorter versions of translateX and translateY. You can write it either way. GSAP is very accommodating like that.
The result
Alright, here we go. Let’s look at our new animation.
See the Pen GreenSock 5 Minute Quick Start by Craig Roblewsky (@PointC) on CodePen.
Pretty cool, right? Maybe not award winning but hey, we made the div do exactly what we wanted and it happened with one simple tween. All the code together looks like this.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Your Page Title</title>
<style>
#target {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #5cceee;
color: white;
}
</style>
</head>
<body>
<div id="target"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script>
gsap.to("#target", {
duration: 1,
translateX: 200,
y: 200,
rotation: 360,
scale: 1.5
});
</script>
</body>
</html>
Timelines and sequencing
The other concept I want to show you is GSAP timelines. Sequencing tweens together is where GSAP really stands out. Remember that little tween we made up above? What if we want multiple tweens to happen in order? That’s when we switch to a timeline.
Timeline syntax
The timeline syntax is almost identical to a single tween. Instead of saying gsap.to, we say gsap.timeline().to. After that, you can chain all the tweens together. Huh? What does that mean? Let’s look at an example.
I’ve set up five divs on a page, gave them a little bit of style and centered them with flex. I won’t paste the code into the article as it’s not too exciting though you can check the demo to see it. The actual GSAP code looks like this.
gsap
.timeline({ defaults: { duration: 0.35, ease: "sine" } })
.to("#box1", { y: 100 })
.to("#box2", { y: -100 })
.to("#box3", { x: -70 })
.to("#box4", { rotation: 180 })
.to("#box5", { x: -70, y: 70, opacity: 0.5 });
We’re telling GSAP to move box 1 to y:100 and then, when you’re done with that, move box 2 to y:-100, etc. Those five tweens will play in sequence. I’ve also added some defaults for the timeline including a duration and ease. I’m not going to dive into defaults in this tutorial. Suffice it to say, those values get passed down to the children of the timeline.
We then get five tweens playing in sequence like so:
See the Pen GreenSock Starter Timeline #1 by Craig Roblewsky (@PointC) on CodePen.
Easy timeline changes
Our client has now seen our awesome div animation and wants some changes. They always do, right? Our client says they’d like box 2 to animate before box 1 and box 5 should animate before boxes 3 and 4. They also want the box 4 animation to be a little slower and could the box wiggle a bit at the end.
With CSS animations these changes would be a nightmare, but not with GSAP. You simply change the order of the tweens on the timeline and use a different duration and ease on the #4 box animation.
gsap
.timeline({ defaults: { duration: 0.35, ease: "sine" } })
.to("#box2", { y: -100 })
.to("#box1", { y: 100 })
.to("#box5", { x: -70, y: 70, opacity: 0.5 })
.to("#box3", { x: -70 })
.to("#box4", { duration: 1, rotation: 180, scale: 2, ease: "elastic" });
You can see I’ve changed the order of #1 and #2. The box 5 animation was moved to the middle and I added a duration and ease to the box 4 tween. By adding a duration and ease, you override the defaults for the timeline. The rest of the tweens still have a duration of 0.35 and use a sine ease. This is the new animation.
See the Pen GreenSock Starter Timeline #2 by Craig Roblewsky (@PointC) on CodePen.
Hooray! Our client is thrilled and we are now rich and famous. Well… maybe not yet, but that’s all pretty cool, right? Sequencing tweens is the cornerstone of all GSAP animations and you can see how quickly and easily you can make changes.
Final thoughts
We have only scratched the surface of the GreenSock Animation Platform here, but I hope you kinda sorta understand tweens and timelines now. Until next time, keep your pixels movin’.
