What is GSAP? A Library That Enriches Web Animations

GSAP, short for “GreenSock Animation Platform,” is a JavaScript library (a collection of commonly used functions) that allows you to create smooth, rich animations on your website.

Have you ever wanted to “add more motion to your website” or “include eye-catching effects”?
Of course, you can create animations with CSS animation or transition properties. However, when it comes to more complex motion or coordinating multiple animations (called sequence animations), CSS alone can become difficult to manage, and performance (smoothness) may decrease.

GSAP was created to solve these problems.
With just a few lines of code, you can move, rotate, or change the color of elements, and even precisely control multiple motions using its powerful timeline feature. It allows you to create professional-grade animations surprisingly easily.

Because of its exceptional performance and consistent behavior across most browsers (Chrome, Safari, Firefox, etc.), GSAP is widely used in web development. It’s also intuitive for beginners, making it a perfect tool to start learning web animation.

Benefits and Key Features of GSAP

There are clear reasons why GSAP is favored by so many developers. Let’s take a look at its main benefits and features compared to CSS or other libraries (such as jQuery’s animation functions).

1. Outstanding Performance and Lightweight Design

GSAP is designed with animation smoothness as its top priority. It has built-in optimization for browser rendering, allowing it to run as fast—or even faster—than CSS animations.
The library itself is also lightweight, minimizing any impact on your site’s loading speed.

2. Easy Control of Complex Animations (Timeline Feature)

One of GSAP’s most remarkable features is its timeline feature.
For example, if you want to “move A, then move B, and simultaneously rotate C,” achieving that sequence in CSS requires complex code and precise animation-delay adjustments.

With GSAP’s timeline, you can manage these animations intuitively as one flow.

// Example of GSAP's timeline feature
const tl = gsap.timeline();

tl.to(".box1", { x: 200, duration: 1 })  // Move box1 200px to the right over 1 second
  .to(".box2", { y: 100, duration: 0.5 }) // After box1, move box2 down 100px over 0.5 seconds
  .to(".box3", { rotation: 360 });        // After box2, rotate box3

As shown, you simply chain the methods (using .) in the order you want them executed. You can also easily control playback, pause, and even reverse animations.

3. Excellent Cross-Browser Compatibility

In web development, issues like “it works in Chrome but not in Safari” are common due to browser differences.
In the past, CSS properties for animation (like transform) required vendor prefixes such as –webkit- depending on the browser.

GSAP handles all these cross-browser inconsistencies internally. As long as you follow GSAP’s syntax, your animations will behave consistently across browsers without extra effort.

4. Intuitive and Easy-to-Learn Syntax

GSAP’s syntax is extremely simple.
The gsap.to() method means “animate (target) to (specified state),” making it clear and beginner-friendly.

// Fades out an element with class "logo" to opacity 0 over 1 second
gsap.to(".logo", { duration: 1, opacity: 0 });

The official documentation and tutorials are also extensive, providing a great learning environment.

The Easiest Way: How to Add GSAP Using a CDN

To use GSAP, you first need to include it in your project.
There are several ways to do this, but for beginners, the simplest and fastest method is using a CDN (Content Delivery Network).

What Is a CDN?

CDN stands for “Content Delivery Network.”
Normally, to use a library, you’d download its program file (such as a .js file) from the internet and place it in your project folder.

With a CDN, you don’t need to download or store the file yourself. Instead, your site loads GSAP directly from distributed servers around the world that cache the file.

By simply adding one line to your HTML file, you can start using GSAP immediately—perfect for learning or small projects.

GSAP CDN Script

To load GSAP (core version) via CDN, add the following <script> tag to your HTML file:

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

*Version (e.g., 3.12.5) is current at the time of writing. Always check the official GreenSock website for the latest CDN link.

Where to Place It in the HTML File

This <script> tag is typically placed just before the closing </body> tag.

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>GSAP Installation Test</title>
    <style>
        /* Style for the animated element */
        .box {
            width: 100px;
            height: 100px;
            background-color: teal;
        }
    </style>
</head>
<body>

    <h1>GSAP Installation Test</h1>
    <div class="box"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

Why place it at the end of <body>?
HTML loads from top to bottom. If heavy JavaScript files are loaded in the <head>, rendering of HTML and CSS is blocked until the script finishes loading, making your site feel slow.
Since GSAP code depends on the existence of HTML elements (e.g., .box), placing it at the bottom ensures all elements are loaded before scripts execute.

Test It: Run a Simple Animation

In the main.js file (or inside a <script> tag at the bottom of <body>), add the following GSAP code.
If the element with class .box slides to the right, your setup works!

// Inside main.js

// Targets the element with class .box
// Moves it 300px along the X-axis (horizontally)
// over 1 second (duration: 1)
gsap.to(".box", {
    duration: 1,
    x: 300
});

That’s all it takes for a smooth animation to appear. Simple, right?
First, master the CDN setup, then try experimenting with various animations using GSAP.