How to start with the GreenSock Animation Toolset for JavaScript

What you will get from this 4 minute read

• You will have a starting understanding of the GreenSocks JavaScript toolset for modern web animations.

• You will be able to create your first neat animations in no time.

In order to see the following explanation in action, please see this codepen.

Create animations in no time

The GreenSock Animation Platform (GSAP) can help you animate basically anything. Due to its fast, compatible, and relatively easy approach, you will be able to create some nice little animations without even needing a deep understanding of JavaScript.

And if you are interested in actually creating stunning animations, which will definitely help you to achieve a unique front-end feature for your projects, GSAP will also be the place for you as many impressive approaches are possible with GSAP.

An easy example

While such impressive examples as mentioned above will - of course - take some time to wrap your head around, you also have the opportunity to find a relatively easy start with GSAP.

Let's consider some HTML and CSS with which we basically just create three centered boxes:

<div class="container">
  <div class="box">idx = 0</div>
  <div class="box">idx = 1</div>
  <div class="box">idx = 2</div>
</div>

.container {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 50px;
  background-Color: black;
  border-radius: 5px;
  transition: all 0.25s;
  margin-bottom: 25px;
  color: white;
  cursor: pointer;
}

.box:hover {
  opacity: 0.8;
}

There is not much to explain about this part since you can basically do what you want with it. The goal for me was to just create three boxes that received some sort of little styling.

The interesting part is yet to come.

Introduction to GSAP

GSAP can easily be initialized via CDN: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js - it's actually recommended by GSAP to use CDN files.

For my Codepen example, I'm also using this CDN approach.

After that, we want to start by selecting all our created boxes. For this step, I'm making use of the toArray() GSAP utility method.

gsapArray = gsap.utils.toArray(".box");

This way, it's quite convenient to handle all the boxes for the next steps to come. There are different utility methods introduced by GSAP, which all help with specific tasks. Don't get confused by all this right now. You don't need these methods at the start of GSAP. For basic animations you don't even need the toArray() method.

The next step is to create our first neat animation!

gsap.to([gsapArray], {color: "grey", stagger: 0.75});

With this one-liner we can use gsap.to, which is an expression to create some sort of animation (the selected elements will receive the specified values from this function) for all of our boxes that are sitting in the previously initialized array. In this example, I want to change the font color from white (current color specified in the CSS code) to gray.

After that, you basically don't need anything else to make this work. However, I want to make this animation a little bit more special. To achieve this, I am making use of stagger which is also GSAP specific and quite a treat for everyone who wants to implement animations. The stagger effect helps in this example to create a delay between the single box animations since the next box animation will wait for the previous one to be finished.

And that's pretty much it! We just created a small little animation with basically almost no code.

If you want to experiment by yourself, I recommend switching from color to width or height, for example, and putting in respective pixel values. You will see that you can create different small animations in no time with GSAP.

Next steps could be to glance through the GSAP documentation to get a deeper insight into what methods and approaches there are. You will be able to achieve some useful and nice small results without spending too much time.

Conclusion

The GreenSock Animation Platform (GSAP) is a pretty helpful tool in order to create stunning animations. While beginners can find quick results with GSAP, advanced developers will be able to create unique animations that will help to bring their front-end projects to the next level.