Getting started with GreenSock

GreenSock is a powerful JavaScript animation library that allows you to create smooth and dynamic animations for your web projects. In this tutorial, we will cover the basics of GreenSock and guide you through building a simple animation.

Getting Started with GreenSock

To get started with GreenSock, you’ll need to include the library in your project. You can do this by downloading the library from the GreenSock website or by including it through a CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

Once you’ve included the library, you can start using GreenSock in your JavaScript code.

Basic Animation with GreenSock

The first thing we’ll do is create a basic animation. We’ll use GreenSock to move an element across the screen. The code is split in html, CSS, JavaScript. You find the complete code here.

<div id="box"></div>

#box {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
}

const element = "#box"
gsap.to(element, { x: 500, duration: 2, rotation: 360})
gsap.to(element, { y: 200, duration: 1 });

  In this example, we’re selecting the box div and using the gsap.to() method twice to animate it. The x property is used to move the element across the x-axis. We’re setting it to 500 pixels, which means the element will move 500 pixels to the right. The duration property is used to set the duration of the animation, in this case, 2 seconds. the rotate property is used to rotate the element by 360 degrees.

Easing

GreenSock provides a wide range of easing options to create different types of animations. Easing determines how an animation progresses over time. By default, GreenSock uses a linear easing, which means the animation progresses at a constant rate.

To use a different easing, you can pass the easing function as a third argument to the to() method. For example, to use the “ease-out” easing:

gsap.to(element, { x: 500, duration: 2, rotation: 360, ease: "bounce.out"});

There are many different easing functions you can use with GreenSock. You can find a full list on the GreenSock website.

Chaining Animations

GreenSock makes it easy to chain animations together. To do this, you can use the Timeline feature.

const element = "#box"
let tl = gsap.timeline()
tl.to(element, { x: 500, duration: 2, rotation: 360, ease: "bounce.out"});
tl.to(element, { y: 200, duration: 1 });
tl.to(element, { y: 400, duration: 3 });

Conclusion

GreenSock is a powerful and flexible animation library that can help you create dynamic animations for your web projects. In this tutorial, we covered the basics of GreenSock, including how to create a simple animation, how to use easing, and how to chain animations together. With this knowledge, you can start exploring the many features of GreenSock and create impressive animations for your web projects.

You can find a sample project here on Github. This CodePen also shows a basic example only using one html file. I hope this gets you started with GreenSock. You can find further information here. Happy Coding