Learn GSAP with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple GSAP Animation

# gsap/demo/index.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="box" style="width:100px;height:100px;background:blue;"></div>
    <script>
        gsap.to('#box', { x: 300, rotation: 360, scale: 1.5, duration: 2 });
    </script>
  </body>
</html>

A basic GSAP program that animates a div element moving from left to right with rotation and scaling effects.

Let’s Try →

GSAP Bounce Animation

# gsap/demo/bounce.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="ball" style="width:100px;height:100px;background:red;border-radius:50%;"></div>
    <script>
        gsap.to('#ball', { y: 300, repeat: -1, yoyo: true, duration: 1, ease: 'bounce.out' });
    </script>
  </body>
</html>

A div element bouncing up and down using GSAP.

Let’s Try →

GSAP Fade In

# gsap/demo/fade_in.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="fade" style="width:100px;height:100px;background:green;opacity:0;"></div>
    <script>
        gsap.to('#fade', { opacity: 1, duration: 2 });
    </script>
  </body>
</html>

Fades in a div element using GSAP.

Let’s Try →

GSAP Slide In From Left

# gsap/demo/slide_left.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="slide" style="width:100px;height:100px;background:purple;"></div>
    <script>
        gsap.from('#slide', { x: -300, duration: 2, ease: 'power2.out' });
    </script>
  </body>
</html>

Slides a div in from the left side of the screen.

Let’s Try →

GSAP Rotate Animation

# gsap/demo/rotate.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="rotate" style="width:100px;height:100px;background:orange;"></div>
    <script>
        gsap.to('#rotate', { rotation: 360, repeat: -1, duration: 2, ease: 'linear' });
    </script>
  </body>
</html>

Rotates a div element continuously.

Let’s Try →

GSAP Scale Pulse

# gsap/demo/scale_pulse.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="pulse" style="width:100px;height:100px;background:pink;"></div>
    <script>
        gsap.to('#pulse', { scale: 1.5, repeat: -1, yoyo: true, duration: 1 });
    </script>
  </body>
</html>

Creates a pulsing scale effect.

Let’s Try →

GSAP Timeline Example

# gsap/demo/timeline.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="box1" style="width:50px;height:50px;background:red;margin:10px;"></div>
    <div id="box2" style="width:50px;height:50px;background:blue;margin:10px;"></div>
    <script>
        const tl = gsap.timeline({ repeat: -1, yoyo: true });
        tl.to('#box1', { x: 200, duration: 1 })
          .to('#box2', { y: 200, duration: 1 }, '<');
    </script>
  </body>
</html>

Sequences multiple animations using a timeline.

Let’s Try →

GSAP Color Change

# gsap/demo/color_change.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="colorBox" style="width:100px;height:100px;background:yellow;"></div>
    <script>
        gsap.to('#colorBox', { backgroundColor: 'red', duration: 2, repeat: -1, yoyo: true });
    </script>
  </body>
</html>

Animates a div's background color.

Let’s Try →

GSAP Drag Example

# gsap/demo/drag.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/Draggable.min.js"></script>
  </head>
  <body>
    <div id="dragBox" style="width:100px;height:100px;background:cyan;"></div>
    <script>
        Draggable.create('#dragBox');
    </script>
  </body>
</html>

Makes a div draggable using GSAP Draggable.

Let’s Try →

GSAP Elastic Animation

# gsap/demo/elastic.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="elasticBox" style="width:100px;height:100px;background:lime;"></div>
    <script>
        gsap.to('#elasticBox', { x: 300, duration: 2, ease: 'elastic.out(1, 0.3)', repeat: -1, yoyo: true });
    </script>
  </body>
</html>

Animates a div with an elastic ease effect.

Let’s Try →

Code Sample Descriptions

Simple GSAP Animation

# gsap/demo/index.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="box" style="width:100px;height:100px;background:blue;"></div>
    <script>
        gsap.to('#box', { x: 300, rotation: 360, scale: 1.5, duration: 2 });
    </script>
  </body>
</html>

A basic GSAP program that animates a div element moving from left to right with rotation and scaling effects.

Let’s Try →

GSAP Bounce Animation

# gsap/demo/bounce.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="ball" style="width:100px;height:100px;background:red;border-radius:50%;"></div>
    <script>
        gsap.to('#ball', { y: 300, repeat: -1, yoyo: true, duration: 1, ease: 'bounce.out' });
    </script>
  </body>
</html>

A div element bouncing up and down using GSAP.

Let’s Try →

GSAP Fade In

# gsap/demo/fade_in.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="fade" style="width:100px;height:100px;background:green;opacity:0;"></div>
    <script>
        gsap.to('#fade', { opacity: 1, duration: 2 });
    </script>
  </body>
</html>

Fades in a div element using GSAP.

Let’s Try →

GSAP Slide In From Left

# gsap/demo/slide_left.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="slide" style="width:100px;height:100px;background:purple;"></div>
    <script>
        gsap.from('#slide', { x: -300, duration: 2, ease: 'power2.out' });
    </script>
  </body>
</html>

Slides a div in from the left side of the screen.

Let’s Try →

GSAP Rotate Animation

# gsap/demo/rotate.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="rotate" style="width:100px;height:100px;background:orange;"></div>
    <script>
        gsap.to('#rotate', { rotation: 360, repeat: -1, duration: 2, ease: 'linear' });
    </script>
  </body>
</html>

Rotates a div element continuously.

Let’s Try →

GSAP Scale Pulse

# gsap/demo/scale_pulse.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="pulse" style="width:100px;height:100px;background:pink;"></div>
    <script>
        gsap.to('#pulse', { scale: 1.5, repeat: -1, yoyo: true, duration: 1 });
    </script>
  </body>
</html>

Creates a pulsing scale effect.

Let’s Try →

GSAP Timeline Example

# gsap/demo/timeline.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="box1" style="width:50px;height:50px;background:red;margin:10px;"></div>
    <div id="box2" style="width:50px;height:50px;background:blue;margin:10px;"></div>
    <script>
        const tl = gsap.timeline({ repeat: -1, yoyo: true });
        tl.to('#box1', { x: 200, duration: 1 })
          .to('#box2', { y: 200, duration: 1 }, '<');
    </script>
  </body>
</html>

Sequences multiple animations using a timeline.

Let’s Try →

GSAP Color Change

# gsap/demo/color_change.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="colorBox" style="width:100px;height:100px;background:yellow;"></div>
    <script>
        gsap.to('#colorBox', { backgroundColor: 'red', duration: 2, repeat: -1, yoyo: true });
    </script>
  </body>
</html>

Animates a div's background color.

Let’s Try →

GSAP Drag Example

# gsap/demo/drag.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/Draggable.min.js"></script>
  </head>
  <body>
    <div id="dragBox" style="width:100px;height:100px;background:cyan;"></div>
    <script>
        Draggable.create('#dragBox');
    </script>
  </body>
</html>

Makes a div draggable using GSAP Draggable.

Let’s Try →

GSAP Elastic Animation

# gsap/demo/elastic.html
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="elasticBox" style="width:100px;height:100px;background:lime;"></div>
    <script>
        gsap.to('#elasticBox', { x: 300, duration: 2, ease: 'elastic.out(1, 0.3)', repeat: -1, yoyo: true });
    </script>
  </body>
</html>

Animates a div with an elastic ease effect.

Let’s Try →