Learn Gsap - 10 Code Examples & CST Typing Practice Test

GSAP (GreenSock Animation Platform) is a high-performance JavaScript library for creating complex animations in the browser. It provides an easy-to-use, robust API for animating DOM elements, SVGs, canvas objects, and even WebGL/Three.js content, with precise control over timing, easing, and sequencing.

View all 10 Gsap code examples →

Simple GSAP Animation GSAP Bounce Animation GSAP Fade In GSAP Slide In From Left GSAP Rotate Animation GSAP Scale Pulse GSAP Timeline Example GSAP Color Change GSAP Drag Example GSAP Elastic Animation

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 →

Frequently Asked Questions about Gsap

What is Gsap?

What are the primary use cases for Gsap?

DOM element animations for websites. SVG and vector graphic animations. Canvas and WebGL (Three.js) animations. Scroll-triggered and timeline-based UI effects. Interactive and gamified web interfaces

What are the strengths of Gsap?

Smooth, high-performance animations even under heavy load. Works with DOM, SVG, canvas, and WebGL objects. Highly extensible with official plugins. Precise control over timing, delays, and easings. Industry-standard with large community and professional support

What are the limitations of Gsap?

Proprietary license for some advanced plugins (commercial use). Overkill for simple CSS transitions. Learning curve for complex timelines and callbacks. Requires JavaScript knowledge. Bundle size may impact very lightweight projects

How can I practice Gsap typing speed?

CodeSpeedTest offers 10+ real Gsap code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn Gsap - 10 Code Examples & CST Typing Practice Test

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 →

Frequently Asked Questions about Gsap

What is Gsap?

What are the primary use cases for Gsap?

DOM element animations for websites. SVG and vector graphic animations. Canvas and WebGL (Three.js) animations. Scroll-triggered and timeline-based UI effects. Interactive and gamified web interfaces

What are the strengths of Gsap?

What are the limitations of Gsap?

How can I practice Gsap typing speed?

CodeSpeedTest offers 10+ real Gsap code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.