GSAP Getting Started — Complete Beginner's Guide to JavaScript Animation

    %%{init: {"flowchart": {"htmlLabels": true}} }%%
flowchart LR
  A["You Are Here: Getting Started"] --> B[Timelines & Sequencing]
  B --> C[ScrollTrigger]
  A --> D[Easing & Motion Paths]
  A --> E[Performance & Best Practices]
  click A "/frontend/libraries/gsap/gsap-getting-started"
  click B "/frontend/libraries/gsap/gsap-timelines-sequencing"
  click C "/frontend/libraries/gsap/gsap-scrolltrigger"
  click D "/frontend/libraries/gsap/gsap-easing-motion"
  click E "/frontend/libraries/gsap/gsap-performance"
  

GSAP (GreenSock Animation Platform) is a high-performance JavaScript library for creating smooth, browser-compatible animations with precision timing and full control over every frame.

In this tutorial, you’ll learn the fundamentals of JavaScript animation with GSAP — from installation to building an interactive playground you can tweak in real time.

What You’ll Learn

By the end of this guide, you will be able to:

• Install GSAP via CDN, npm, or ES modules
• Understand the three core tween methods: gsap.to(), gsap.from(), and gsap.fromTo()
• Target elements using CSS selectors — classes, IDs, attributes, and SVG
• Control animation timing with duration, delay, repeat, and yoyo
• Create staggered group animations
• Hook into animation lifecycle with callbacks
• Avoid the most common GSAP beginner mistakes
• Build a complete interactive animation sandbox

Why GSAP Animation Matters

Animations are not just decoration — they guide the user’s eye, provide feedback, and make interfaces feel responsive. Think of the smooth transitions in Doda Browser’s tab switcher or the subtle bounce when you complete a scan in Durga Antivirus Pro. That polished feel comes from well-crafted animation.

Security note: Understanding Gsap Getting Started helps build more secure applications — a core principle at DodaTech, where tools like Durga Antivirus Pro and Doda Browser rely on solid implementation practices.

GSAP powers these kinds of experiences. It handles cross-browser inconsistencies, GPU acceleration, and precise timing so you don’t have to reinvent the wheel. Whether you’re building a product demo for DodaZIP or a dashboard for Durga Antivirus Pro, GSAP gives your UI that professional, responsive feel.

Prerequisites

Installation — Three Ways to Add GSAP

GSAP is just a JavaScript file. You can add it to any project in three ways.

1. CDN (Simplest — Just a Script Tag)

Add one line to your HTML and you’re done:

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

Why this works: The browser downloads the GSAP library from a content delivery network (CDN). After that, the global gsap object is available in any <script> tag that follows. This is the fastest way to start experimenting.

2. npm (For Build Tools Like Webpack or Vite)

If you’re using a bundler with frameworks like React or Vue:

npm install gsap

Then import it in your JavaScript:

import gsap from "gsap";

Why this matters: The npm approach lets your bundler optimize GSAP for production — tree-shaking unused features and minifying the code.

3. ES Modules from CDN (Modern Browsers)

<script type="module">
  import gsap from "https://esm.sh/gsap";
  gsap.to(".box", { x: 200 });
</script>

When to use this: When you want modern module syntax without a build step. It works in all current browsers.

Core Tween Methods — The Three Musketeers

Every GSAP animation is built from one of three methods. Think of them as different ways to tell an element where to be and when.

gsap.to() — “Go Here From Where You Are”

This is the method you’ll use 80% of the time. You tell GSAP: “Take this element from its current state and animate it to these target values.”

// Move .box 200px to the right over 1 second
gsap.to(".box", { x: 200, duration: 1 });

What happens step by step:

1. GSAP finds all elements matching .box
2. It reads their current x position (which is 0 by default)
3. Over 1 second, it interpolates from 0 to 200
4. Each frame, it updates the element’s transform: translateX() property

You can combine multiple properties:

gsap.to(".box", {
  x: 300,        // move right 300px
  y: 100,        // move down 100px
  rotation: 360, // spin one full turn
  opacity: 0.5,  // half transparent
  duration: 2,   // over 2 seconds
  delay: 0.5     // wait half a second first
});

gsap.from() — “Start Here, End Where You Are”

This is the reverse of to(). The element begins at the values you specify and animates back to its natural CSS state.

// Box starts 200px to the right, invisible, then slides and fades in
gsap.from(".box", { x: 200, duration: 1, opacity: 0 });

// Hero title drops in from above while fading in
gsap.from(".hero-title", { y: -50, opacity: 0, duration: 1.5 });

Why use from()? It’s perfect for reveal animations — elements that should appear on the page as if they’re arriving from somewhere.

gsap.fromTo() — Full Control of Start and End

You define both the starting values and the ending values. The element’s CSS is ignored for both states.

gsap.fromTo(".box",
  { x: -100, opacity: 0, scale: 0.5 },   // start here
  { x: 300, opacity: 1, scale: 1, duration: 1.5 }  // end here
);

When to use this: When you need precise control. For example, a modal that scales up from 0 while fading in — you don’t want to rely on the element’s default CSS for either state.

Comparison Table

Targeting Elements — How GSAP Finds What to Animate

GSAP uses the same selectors as CSS. If you can style it with CSS, you can animate it with GSAP.

// By class
gsap.to(".card", { y: 50 });

// By ID
gsap.to("#hero", { scale: 1.1 });

// By attribute
gsap.to("[data-animate]", { rotation: 45 });

// SVG elements — yes, GSAP handles SVG too
gsap.to("circle", { cx: 300, fill: "blue" });

// Multiple elements with stagger (each starts 0.1s after the last)
gsap.to(".item", { y: 30, stagger: 0.1 });

You might be wondering: What can GSAP actually animate? Almost any numeric or color CSS property.

Duration, Delay, Repeat & Yoyo — Controlling the Clock

These four properties control when and how many times an animation plays.

gsap.to(".box", {
  x: 400,
  duration: 2,        // 2 seconds to complete
  delay: 1,           // wait 1 second before starting
  repeat: 3,          // repeat 3 additional times (4 total plays)
  yoyo: true,         // reverse direction on each repeat
  repeatDelay: 0.5    // pause half a second between repeats
});

What each one does:

• duration — How long one play takes (default 0.5 seconds). Increase for slow motion, decrease for snappy.
• delay — Wait time before the animation starts. Useful for sequenced entrances.
• repeat — Number of extra plays. repeat: 1 = 2 total. repeat: -1 = infinite loop. This trips up everyone at first.
• yoyo — If true, each repeat plays the animation in reverse. Combined with repeat: -1, you get a seamless back-and-forth.
• repeatDelay — Pause between repeats (only matters if repeat > 0).

Stagger — Animating Groups with Rhythm

When you animate multiple elements, stagger adds a timed delay between each element’s start. Think of dominoes falling — one after another in sequence.

// Basic stagger — each .item starts 0.1s after the previous
gsap.to(".item", {
  y: -30,
  opacity: 1,
  stagger: 0.1,
  duration: 0.6
});

But stagger is smarter than that. You can control the direction of the stagger:

// Stagger from the center outward — like ripples in water
gsap.to(".item", {
  scale: 1.5,
  stagger: {
    each: 0.08,    // 0.08s between each element
    from: "center"  // start from center, go outward
  }
});

// Grid-aware stagger — for card grids
gsap.to(".grid-item", {
  rotation: 45,
  stagger: {
    grid: [5, 10],   // 5 rows, 10 columns
    from: "edges",    // start from the edges, go inward
    each: 0.05
  }
});

When to use stagger: Any time you have a list, grid, or group of elements that should animate in sequence. Card decks, menu items, gallery thumbnails — stagger makes them feel organized.

Callbacks — Hooking Into the Animation Lifecycle

Sometimes you need to run code when an animation starts, updates, or finishes. Callbacks are your hooks.

gsap.to(".box", {
  x: 400,
  duration: 2,
  onStart: () => console.log("Animation started"),
  onUpdate: () => console.log("Animation is playing — frame updated"),
  onComplete: () => console.log("Animation finished"),
  onRepeat: () => console.log("Repeated!"),
  onReverseComplete: () => console.log("Reverse finished")
});

Why callbacks matter: In a production app like DodaZIP’s file extraction progress, you might use onUpdate to update a progress bar or onComplete to trigger the next step in a workflow.

Common Mistakes

1. Forgetting units on non-pixel properties

GSAP assumes pixels for x, y, top, left. But for width, height, or padding, you need units when using %, vw, em.

// This works fine — GSAP assumes px
gsap.to(".box", { width: 50 });

// This breaks silently if you meant 50%
gsap.to(".box", { width: "50%" }); // correct with string

2. Animating display — it won’t work

GSAP cannot animate between display: none and display: block. Use opacity and visibility instead.

// Won't work
gsap.to(".box", { display: "none" });

// Correct approach
gsap.to(".box", {
  opacity: 0,
  onComplete: () => { box.style.display = "none"; }
});

3. Overwriting conflicts — two tweens on the same element

By default, GSAP overwrites conflicting animations on the same target. If you want both to run, set overwrite: "none".

gsap.to(".box", { x: 100, duration: 1 });
gsap.to(".box", { x: 200, duration: 1, overwrite: "none" }); // starts from 100

4. Using ease: "linear" for everything

Linear easing looks robotic — objects don’t start and stop instantly in real life. Use "power2.out" for natural deceleration.

5. Forgetting to kill tweens on unmount

In React, Vue, or any SPA, tweens continue running even after a component is removed. This causes memory leaks.

const tween = gsap.to(".box", { x: 200, duration: 5 });
// Clean up when component unmounts
tween.kill();

6. Confusing repeat count

repeat: 1 means one additional play (two total). repeat: 0 (default) = one play. This is the #1 confusion point for GSAP beginners.

Practice Questions

1. What is the difference between gsap.to() and gsap.from()?

   gsap.to() animates from the element’s current state to the values you specify. gsap.from() animates from the values you specify back to the element’s current state. Think: to() = “go there”, from() = “come from there”.

2. If you set repeat: 2 on a tween, how many total times does it play?

   Three times. repeat counts extra plays after the first. So repeat: 0 = 1 play, repeat: 2 = 3 plays.

3. What does stagger: 0.15 do when animating a group of 10 elements?

   Each element starts 0.15 seconds after the previous one. The total delay between first and last is 0.15 × 9 = 1.35 seconds.

4. How do you make an animation loop forever with a back-and-forth motion?

   Set repeat: -1 and yoyo: true. The element animates forward, then reverses back, then forward again — infinitely.

5. Why should you kill tweens when a component unmounts in a SPA?

   Because GSAP holds references to DOM nodes. If the node is removed without killing the tween, GSAP keeps trying to update it, causing console errors and memory leaks.

Challenge

Create a staggered entrance animation for a 4×4 grid of cards. Each card should fade in and slide up from below, with the cards in the center appearing first and the outer edges last. Use gsap.from() with a grid-aware stagger.

gsap.from(".card", {
  y: 60,
  opacity: 0,
  duration: 0.6,
  ease: "power2.out",
  stagger: {
    grid: [4, 4],
    from: "center",
    each: 0.06
  }
});

FAQ

Try It Yourself — Interactive Animation Playground

Build your own GSAP playground where you can switch between to, from, and fromTo, adjust timing with sliders, and see the result instantly. This is the same kind of interactive tool used internally by DodaTech engineers when prototyping UI animations for Doda Browser and Durga Antivirus Pro.

What’s Next

Now that you can create individual tweens, it’s time to sequence them into choreographed animations.

Related topics: CSS Animations, SVG Animation, Canvas API

What’s Next

Congratulations on completing this Gsap Getting Started tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!