Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. Gsap

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 AnimationGSAP Bounce AnimationGSAP Fade InGSAP Slide In From LeftGSAP Rotate AnimationGSAP Scale PulseGSAP Timeline ExampleGSAP Color ChangeGSAP Drag ExampleGSAP Elastic Animation

Learn GSAP with Real Code Examples

Updated Nov 26, 2025

Explain

GSAP abstracts complex animation logic into simple, chainable commands.

Supports tweening of numeric properties for DOM, SVG, canvas, and JavaScript objects.

Provides timelines for synchronized and sequenced animations.

Includes plugins for scroll-triggered animations, morphing, text effects, and more.

Runs smoothly across browsers with minimal performance overhead.

Core Features

Tween - animates object properties over time

Timeline - sequences multiple tweens

Easing functions - control motion dynamics

Plugins - extend functionality (ScrollTrigger, MorphSVG, etc.)

GSDevTools - debugging and performance tools

Basic Concepts Overview

Tween - animates one or more properties over time

Timeline - sequences and synchronizes multiple tweens

Easing - controls animation acceleration and deceleration

Callback functions - run code at specific animation points

Plugins - enhance GSAP functionality with extra effects

Project Structure

index.html - main HTML content

main.js - GSAP animation scripts

assets/ - images, SVGs, or media files

modules/ - reusable animation functions

styles/ - CSS for initial layout and styling

Building Workflow

Identify the elements or objects to animate

Create tweens or timelines with desired properties

Apply easing and duration settings

Chain animations and callbacks for sequencing

Play, pause, or reverse animations as needed

Difficulty Use Cases

Beginner: fade, move, or scale DOM elements

Intermediate: animate SVG paths and morph shapes

Advanced: scroll-triggered timelines with multiple layers

Expert: integrate GSAP with Three.js or canvas

Architect: build complex interactive web apps with synchronized animations

Comparisons

GSAP vs CSS transitions: more precise and powerful

GSAP vs Anime.js: GSAP more feature-rich and performant

GSAP vs Lottie: GSAP better for custom JS animations, Lottie for JSON vector animations

GSAP vs Velocity.js: GSAP more modern and maintained

GSAP vs ScrollMagic: ScrollTrigger is GSAP’s integrated scroll plugin

Versioning Timeline

2008 - GSAP created by Jack Doyle

2010-2015 - Core animation engine enhancements

2016 - Timeline and advanced plugin support

2018 - ScrollTrigger plugin introduced

2023 - Latest stable version with modern ES modules and full plugin ecosystem

Glossary

Tween - animates properties over time

Timeline - sequences multiple tweens

Easing - controls motion dynamics

Plugin - extends GSAP functionality

Callback - function triggered at a point in animation

Installation Setup

Install via npm (`npm install gsap`) or include via CDN

Import GSAP core (`import { gsap } from 'gsap';`)

Optional: import plugins (`import { ScrollTrigger } from 'gsap/ScrollTrigger';`)

Register plugins using `gsap.registerPlugin()`

Start creating tweens and timelines for your objects

Environment Setup

Modern browser with JS enabled

Node.js environment for local builds

Bundler like Vite, Webpack, or Parcel

Optional: framework integration (React, Vue, etc.)

Optional: plugin registration (ScrollTrigger, etc.)

Config Files

index.html - main page and elements to animate

main.js - animation scripts

assets/ - SVG, images, media

modules/ - reusable animation functions

styles/ - initial CSS for layout

Cli Commands

npm install gsap

vite dev / webpack dev

npm run build

npx serve to host locally

Use codepens or JSFiddle for prototyping

Internationalization

Animations are language-agnostic

TextPlugin allows animating localized content

Direction-sensitive animations (LTR/RTL) supported

No inherent i18n dependencies

Content-based animations rely on DOM text

Accessibility

Use motion-reduction media queries (`prefers-reduced-motion`)

Ensure focus states are respected during animations

Avoid triggering disorienting motion

Provide alternative navigation paths

GSAP animations should enhance, not hinder accessibility

Ui Styling

Initial layout via CSS/HTML

Animations applied via GSAP

Responsive handling through JS and media queries

Interactive motion tied to user events

GSAP controls motion, not static styling

State Management

GSAP maintains internal animation state

Timelines manage sequencing and progress

Callbacks allow external state updates

Control playback (pause, reverse, seek)

Responsive updates via refresh() for layout changes

Data Management

Track animated properties efficiently

Use timelines to group related animations

Reuse tweens for multiple elements

Avoid animating unnecessary DOM properties

Leverage plugin features for advanced data handling

Architecture

Tween engine - core numeric interpolation

Timeline engine - orchestrates multiple tweens

Plugins - extend tween capabilities

Render loop - efficient updates per animation frame

Ease functions - define motion dynamics

Rendering Model

Tween interpolates numeric values over time

Timeline orchestrates multiple tweens and callbacks

Render loop efficiently updates properties per animation frame

Plugins extend rendering behavior

Easing functions modify rate of change for natural motion

Architectural Patterns

Tween-based animation engine

Timeline sequencing pattern

Plugin-based extensibility

Callback and event-driven architecture

Integration-friendly with frameworks and libraries

Real World Architectures

Marketing sites with complex scroll effects

Interactive dashboards with animated charts

Web-based games with animated UI

3D WebGL/Three.js integrations

Animated banners and advertisements

Design Principles

High-performance and smooth animations

Flexible, chainable, and modular API

Cross-browser consistency

Extensible via plugins

Precise control over timing and sequencing

Scalability Guide

Use timelines for grouped sequences

Batch DOM updates to reduce reflows

Reuse tweens instead of creating new ones

Use ScrollTrigger for scroll-based triggers

Optimize large number of animated elements

Migration Guide

Convert CSS transitions to GSAP tweens for precise control

Replace jQuery animations with GSAP for performance

Refactor chained animations into timelines

Register plugins for scroll or morphing effects

Test timing and easing for consistency

Performance Notes

Prefer hardware-accelerated properties (transform, opacity)

Batch DOM updates to reduce reflows

Use `will-change` in CSS for smoother transitions

Limit heavy JavaScript calculations during animation

Re-use timelines and tweens where possible

Security Notes

Runs client-side in browser sandbox

No access to system files or memory

Avoid animating untrusted input dynamically

Plugins are maintained and safe to use

Ensure secure hosting for CDN-based scripts

Monitoring Analytics

Monitor FPS during heavy animations

Use GSDevTools to inspect timelines

Track animation performance on mobile

Log callback execution timing

Check scroll-triggered animations across devices

Code Quality

Keep timelines modular and reusable

Use descriptive variable names for tweens

Leverage plugins to reduce boilerplate

Organize animations by page or section

Document complex sequences and callbacks

Practical Examples

Fade in/out elements on page load

Slide elements along X/Y axes with easing

Morph SVG shapes

Scroll-triggered animations using ScrollTrigger

Animate 3D objects in Three.js scenes

Troubleshooting

Ensure GSAP is properly imported

Check selectors target correct elements

Verify plugin registration for extended functionality

Use console logs for callbacks and events

Inspect CSS conflicts that may override animations

Testing Guide

Check animation performance across browsers

Use GSDevTools to inspect timelines

Test callbacks and event triggers

Validate scroll triggers and responsive layouts

Monitor frame rate and animation smoothness

Deployment Options

Include via npm build process

Use CDN for quick prototypes

Bundle with Vite, Webpack, or Parcel

Deploy on static hosting (Netlify, Vercel)

Ensure plugin availability for commercial builds

Tools Ecosystem

GSDevTools - visual timeline inspector

ScrollTrigger - scroll-based animations

MorphSVG - advanced SVG morphing

TextPlugin - text animation effects

SplitText - split text into characters/words for animation

Integrations

Three.js for 3D animations

PixiJS for canvas/WebGL 2D animations

React and React Three Fiber

Vue, Angular, Svelte for reactive UI animations

Lottie for JSON-based animations

Productivity Tips

Reuse timelines and tweens

Use plugins for complex effects

Debug with GSDevTools

Optimize DOM and GPU-heavy properties

Modularize animations for maintainability

Challenges

Complex timeline management

Performance optimization for heavy DOM

Synchronizing multiple animation layers

Plugin integration and registration

Cross-browser smoothness and timing consistency

Learning Path

Start with basic tweens and durations

Learn easing and callbacks

Explore timelines for sequencing

Add ScrollTrigger and other plugins

Integrate GSAP with frameworks and WebGL

Skill Improvement Plan

Week 1: Tweens and easing fundamentals

Week 2: Timelines and sequencing

Week 3: Scroll-triggered animations

Week 4: SVG and text animations

Week 5: Advanced integration with Three.js or frameworks

Interview Questions

Explain the difference between a tween and a timeline.

How do you create a scroll-triggered animation?

What are some common easing functions and their uses?

How would you animate SVG paths using GSAP?

How can GSAP integrate with Three.js or canvas?

Cheat Sheet

gsap.to(element, {duration: 1, x: 100});

gsap.from(element, {opacity: 0, y: 50});

const tl = gsap.timeline();

tl.to('#box', {x: 100}).to('#box', {y: 50});

gsap.registerPlugin(ScrollTrigger);

Books

Learning GSAP 3

GSAP Animation Techniques

Mastering Web Animations with GSAP

Creative Coding with GSAP

High-Performance JS Animations

Tutorials

GSAP beginner guide

Animating DOM elements

Scroll-triggered animations

SVG morphing and text effects

Integrating GSAP with Three.js or canvas

Official Docs

https://greensock.com/docs/

https://greensock.com/gsap/

Community Links

GreenSock official forums

GSAP StackOverflow tag

GSAP Slack/Discord

Codepen and JSFiddle GSAP examples

YouTube GreenSock tutorials

Community Support

GSAP official forums

StackOverflow GSAP tag

GreenSock Slack and Discord

YouTube tutorials and live coding sessions

Official documentation and codepens

Monetization

Premium website animations for marketing

Interactive UI/UX for commercial apps

Animated banner campaigns

Gamified web experiences

Creative coding services with GSAP expertise

Future Roadmap

Better integration with WebGL and Three.js

Enhanced ScrollTrigger and responsive features

More performance optimizations

Expanded plugin ecosystem

Community-driven tutorials and learning resources

When Not To Use

Simple hover transitions -> CSS may suffice

Projects with very limited JS budgets

Animations purely defined by CSS keyframes

Legacy environments without JS support

If you only need static motion with no interactivity

Final Summary

GSAP is the industry-standard JS animation library.

Provides precise, performant, and complex motion control.

Supports DOM, SVG, canvas, and WebGL content.

Extensible with plugins for scroll, text, morphing, and more.

Foundation for professional, interactive, and high-performance web animations.

Faq

Is GSAP free? -> Core is free; some plugins are paid for commercial use.

Does GSAP work on mobile? -> Yes, cross-browser and mobile-friendly.

Can GSAP animate SVGs? -> Yes, fully supported.

Do I need to know CSS animations? -> Helpful but not mandatory.

Can GSAP integrate with Three.js? -> Yes, widely used in 3D scenes.

Code Sample Descriptions

1

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 →
2

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 →
3

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 →
4

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 →
5

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 →
6

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 →
7

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 →
8

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 →
9

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 →
10

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?

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.

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

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.