123 GSAP animation examples and demos with code (2026)

This page collects 123 GSAP animation examples, every one production-tested with a live demo you can open in a new tab. Ten of them are completely free, with the full copy-paste code inline below. The other 113 are premium effects with a one-paragraph rundown, a preview, and a link to the interactive demo.

New to GSAP? The GSAP effects guide covers what an effect is, which plugin to reach for, and how to wire one into a page, and how to animate on scroll walks through ScrollTrigger, which most of these examples use. If it is a heading you want to move, the GSAP text animation page groups those. This page is the full list of examples.

Here are the concrete facts if you want the short version. There are 123 examples in total. Ten are free with complete HTML and JavaScript on this page. Every example runs on GSAP 3.15.0, and every one ships with prefers-reduced-motion accessibility handling and a clean teardown path so it works inside single-page apps and frameworks. The premium examples are sold on GSAP Vault one at a time, or together in the Vault, which also covers the templates, UI elements and website sections. Each one is plain HTML, CSS and JavaScript with no build step, licensed to one developer for unlimited projects.

The free snippets use only the official GSAP CDN and, where relevant, the ScrollTrigger plugin. Nothing here needs a build step, a bundler, or a premium plugin. Paste a block into an HTML file, open it in a browser, and it runs.

Table of contents

• The 10 free examples with complete code
• Scroll and parallax examples
• Text and typography examples
• Cursor and hover examples
• Image and gallery examples
• Cards and layout examples
• Canvas and particle examples
• Background and ambient examples
• Loaders and page transitions
• Browse by category
• From an effect to a finished page

Browse by category

The sections below run in one long list. If you already know the kind of animation you want, these category pages group the same effects with a live demo grid and a plain-English rundown of the technique:

• GSAP scroll animations: pinning, parallax, scrubbed timelines and reveal-on-scroll
• GSAP text animation effects: split reveals, scramble, glitch typography and typewriters
• GSAP background animations: canvas particle fields, morphing blobs and parallax backdrops
• GSAP hover effects: link, button and card hover states
• GSAP image effects: clip reveals, distortion and gallery transitions
• GSAP WebGL effects: shader distortion, particle fields and GPU-driven type
• GSAP loading animations: preloaders, progress bars and page transitions

The 10 free examples with complete code

Each of the ten examples below is self-contained. The code block includes the CDN script tags, the CSS, the markup, and the JavaScript. Every one checks prefers-reduced-motion before it animates, so users who opt out of motion still see the final content.

3D Card Flip

A perspective-based flip that reveals back-face content on hover, with a tap fallback on touch devices. Reach for it on team profiles, pricing cards, product feature comparisons, or flashcard interfaces where a second layer of information belongs on the reverse of the card.

Live demo Open in new tab ↗

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>

<style>
  .flip-card { width: 240px; height: 300px; perspective: 1000px; cursor: pointer; }
  .flip-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
  .flip-card-front, .flip-card-back {
    position: absolute; inset: 0; backface-visibility: hidden;
    display: grid; place-items: center; border-radius: 16px; padding: 1rem; text-align: center;
  }
  .flip-card-front { background: #141414; color: #fff; }
  .flip-card-back { background: #8b5cf6; color: #fff; transform: rotateY(180deg); }
</style>

<div class="flip-card" tabindex="0" role="button" aria-label="Flip card">
  <div class="flip-card-inner">
    <div class="flip-card-front"><h3>Hover me</h3></div>
    <div class="flip-card-back"><p>Back content revealed</p></div>
  </div>
</div>

<script>
  const card = document.querySelector('.flip-card');
  const inner = card.querySelector('.flip-card-inner');
  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const flip = (deg) => reduced
    ? gsap.set(inner, { rotationY: deg })
    : gsap.to(inner, { rotationY: deg, duration: 0.8, ease: 'back.out(1.4)' });

  card.addEventListener('mouseenter', () => flip(180));
  card.addEventListener('mouseleave', () => flip(0));
  card.addEventListener('focus', () => flip(180));
  card.addEventListener('blur', () => flip(0));
</script>

See the 3D Card Flip demo for the click mode, auto-close groups, and staggered scroll entrances.

Scroll Progress Indicator

A fixed bar that fills as the reader moves down the page, driven by a single scrubbed ScrollTrigger. It is the standard reading-position cue for blog posts, documentation, and long-form articles. This snippet uses the linear bar; the full effect adds circle, rail, and numeric counter styles.

Live demo Open in new tab ↗

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

<style>
  .progress-bar {
    position: fixed; top: 0; left: 0; height: 4px; width: 100%;
    transform: scaleX(0); transform-origin: left; background: #c8ff00; z-index: 100;
  }
</style>

<div class="progress-bar" aria-hidden="true"></div>

<script>
  gsap.registerPlugin(ScrollTrigger);

  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    gsap.set('.progress-bar', { scaleX: 1 });
  } else {
    gsap.to('.progress-bar', {
      scaleX: 1,
      ease: 'none',
      scrollTrigger: {
        trigger: document.documentElement,
        start: 'top top',
        end: 'bottom bottom',
        scrub: 0.5
      }
    });
  }
</script>

See the Scroll Progress demo for the circular ring, vertical rail, and percentage counter variants.

CSS Scroll Reveal

The one example on this page with no JavaScript at all. It uses native CSS scroll-driven animations and the view() timeline to fade and slide elements in as they enter the viewport. Ideal for performance-critical marketing pages and static sites where you want entrance motion without shipping a library.

Live demo Open in new tab ↗

<style>
  .reveal-slide-up {
    animation: reveal-up auto linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  @keyframes reveal-up {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal-slide-up { animation: none; opacity: 1; transform: none; }
  }
  @supports not (animation-timeline: view()) {
    .reveal-slide-up { animation: none; opacity: 1; transform: none; }
  }
</style>

<div class="reveal-slide-up">This slides up as it enters the viewport</div>

CSS scroll-driven animations work in Chrome, Edge, and Safari 26 and up (Firefox still has them behind a flag); the @supports fallback keeps content visible everywhere else. Check caniuse.com for current status. See the CSS Scroll Reveal demo for the fade, scale, and directional slide classes.

Typewriter Text

Text that types itself out character by character with a blinking cursor when it scrolls into view. It draws the eye on hero headlines and terminal-themed landing pages. The typing runs on a single GSAP tween with snap, so there is no setInterval to manage or clear.

Live demo Open in new tab ↗

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

<style>
  .typewriter__cursor {
    display: inline-block; width: 2px; height: 1em; background: currentColor;
    margin-left: 2px; vertical-align: text-bottom; animation: blink 1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }
</style>

<h2 data-typewriter>Build interfaces that feel alive.</h2>

<script>
  gsap.registerPlugin(ScrollTrigger);

  document.querySelectorAll('[data-typewriter]').forEach((el) => {
    const full = el.textContent.trim();
    el.setAttribute('aria-label', full);

    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    const textSpan = document.createElement('span');
    textSpan.setAttribute('aria-hidden', 'true');
    const cursor = document.createElement('span');
    cursor.className = 'typewriter__cursor';
    cursor.setAttribute('aria-hidden', 'true');
    el.textContent = '';
    el.append(textSpan, cursor);

    const state = { chars: 0 };
    const tween = gsap.to(state, {
      chars: full.length,
      duration: full.length * 0.045,
      ease: 'none',
      snap: { chars: 1 },
      paused: true,
      onUpdate() { textSpan.textContent = full.slice(0, state.chars); }
    });

    ScrollTrigger.create({ trigger: el, start: 'top 85%', once: true, onEnter: () => tween.play() });
  });
</script>

See the Typewriter Text demo for looping phrases, custom speed, and delay controls.

Parallax Hero

A layered hero where background, headline, and foreground move at different speeds to create depth, all from one scrubbed ScrollTrigger per scene. Each layer declares its own speed with a data attribute: values below 1 lag behind the scroll, values above 1 race ahead. No image assets required.

Live demo Open in new tab ↗

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

<style>
  .parallax-hero { position: relative; height: 100vh; overflow: clip; display: grid; place-items: center; }
  .parallax-layer { position: absolute; inset: -12% 0; display: grid; place-items: center; will-change: transform; }
  .hero-blob {
    width: 60vmin; height: 60vmin; border-radius: 50%;
    background: radial-gradient(circle, #8b5cf6, transparent 70%); filter: blur(40px);
  }
</style>

<section class="parallax-hero" data-parallax>
  <div class="parallax-layer" data-parallax-speed="0.3" aria-hidden="true">
    <div class="hero-blob"></div>
  </div>
  <div class="parallax-layer" data-parallax-speed="0.8">
    <h1>Depth without images</h1>
  </div>
</section>

<script>
  gsap.registerPlugin(ScrollTrigger);

  gsap.matchMedia().add('(prefers-reduced-motion: no-preference)', () => {
    document.querySelectorAll('[data-parallax]').forEach((scene) => {
      const layers = scene.querySelectorAll('[data-parallax-speed]');
      const tl = gsap.timeline({
        scrollTrigger: { trigger: scene, start: 'clamp(top bottom)', end: 'clamp(bottom top)', scrub: true }
      });
      layers.forEach((layer) => {
        const shift = (1 - parseFloat(layer.dataset.parallaxSpeed)) * 50;
        tl.fromTo(layer, { yPercent: -shift }, { yPercent: shift, ease: 'none' }, 0);
      });
    });
  });
</script>

See the Parallax Hero demo for the fade-on-exit option and multi-scene layouts.

Image Clip Reveal

Images that wipe into view with an animated clip-path while the inner picture settles from an oversized scale down to its natural size, the classic Ken Burns settle. The initial hidden state lives in CSS, so images never flash before the script runs. Perfect for editorial photo grids and portfolio case studies.

Live demo Open in new tab ↗

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

<style>
  [data-clip-reveal] { overflow: hidden; clip-path: inset(0 0 100% 0); }
  [data-clip-reveal] img { display: block; width: 100%; height: auto; transform: scale(1.25); }
  @media (prefers-reduced-motion: reduce) {
    [data-clip-reveal] { clip-path: none !important; }
    [data-clip-reveal] img { transform: none !important; }
  }
</style>

<div data-clip-reveal>
  <img src="photo.jpg" alt="Description of the photo">
</div>

<script>
  gsap.registerPlugin(ScrollTrigger);

  gsap.matchMedia().add('(prefers-reduced-motion: no-preference)', () => {
    document.querySelectorAll('[data-clip-reveal]').forEach((wrap) => {
      const img = wrap.querySelector('img');
      gsap.timeline({ scrollTrigger: { trigger: wrap, start: 'top 85%', once: true } })
        .to(wrap, { clipPath: 'inset(0%)', duration: 1.1, ease: 'expo.out' }, 0)
        .to(img, { scale: 1, duration: 1.1, ease: 'expo.out' }, 0);
    });
  });
</script>

See the Image Clip Reveal demo for the four wipe directions and staggered reveal groups.

Hover Underline

An animated link underline that grows from the left on hover and exits through the right, so it never plays in reverse. It runs on GSAP core alone, no plugins, and the script injects the underline element for you, so your markup stays clean. Focus and blur mirror the hover, so keyboard users get the same animation.

Live demo Open in new tab ↗

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>

<style>
  [data-underline] { position: relative; text-decoration: none; color: inherit; }
  .hu-line {
    position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-underline] { text-decoration: underline; }
  }
</style>

<a href="/work" data-underline>Work</a>

<script>
  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    document.querySelectorAll('[data-underline]').forEach((link) => {
      const line = document.createElement('span');
      line.className = 'hu-line';
      line.setAttribute('aria-hidden', 'true');
      link.appendChild(line);

      const enter = () => {
        gsap.set(line, { transformOrigin: 'left' });
        gsap.to(line, { scaleX: 1, duration: 0.4, ease: 'power2.out' });
      };
      const leave = () => {
        gsap.set(line, { transformOrigin: 'right' });
        gsap.to(line, { scaleX: 0, duration: 0.4, ease: 'power2.in' });
      };

      link.addEventListener('mouseenter', enter);
      link.addEventListener('mouseleave', leave);
      link.addEventListener('focus', enter);
      link.addEventListener('blur', leave);
    });
  }
</script>

See the Hover Underline demo for the marker-style fill and hand-drawn SVG wave variants.

Scroll Text Highlight

Editorial copy that reads itself: as the reader scrolls, each word brightens from dim to full and the leading word flashes in your accent colour, so a moving band of highlighted text follows the eye down the paragraph. It splits the text into word spans in plain JavaScript, then drives a single scrubbed ScrollTrigger timeline, so scrolling back up un-lights the words in perfect reverse. Reach for it on manifestos, long-form intros, and any passage you actually want people to read.

Live demo Open in new tab ↗

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>

<style>
  .read-along {
    max-width: 22ch; margin: 50vh auto; font-weight: 600; line-height: 1.4;
    font-size: clamp(1.75rem, 5vw, 3rem);
  }
  .read-along .word { color: #fff; }
  .read-along.is-live .word { color: #3a3a3a; }
</style>

<p class="read-along" data-read-along>Attention is the rarest thing you can give a page. Slow down, and the meaning arrives.</p>

<script>
  gsap.registerPlugin(ScrollTrigger);

  document.querySelectorAll('[data-read-along]').forEach((el) => {
    // Split into word spans in plain JS, no plugin needed
    const words = el.textContent.trim().split(/\s+/);
    el.textContent = '';
    const spans = words.map((w) => {
      const s = document.createElement('span');
      s.className = 'word';
      s.textContent = w;
      el.append(s, document.createTextNode(' '));
      return s;
    });

    // Reduced motion (and no-JS): leave every word at full readable colour
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    el.classList.add('is-live'); // now safe to dim the un-read words
    const tl = gsap.timeline({
      scrollTrigger: { trigger: el, start: 'top 80%', end: 'bottom 45%', scrub: true }
    });
    spans.forEach((s, i) => {
      tl.to(s, { color: '#c8ff00', duration: 0.4 }, i * 0.5)     // lead word lights in accent
        .to(s, { color: '#fff', duration: 0.6 }, i * 0.5 + 0.4); // then settles to full white
    });
  });
</script>

See the Scroll Text Highlight demo for the heading mode, adjustable band width, and per-word settle timing.

Scroll and parallax examples

Scroll-driven animation is where GSAP earns its keep. ScrollTrigger handles pinning, scrubbing, and viewport detection that would take hundreds of lines of Intersection Observer code to approximate. The premium effects below cover the most requested patterns.

More scroll and parallax effects

Text and typography examples

These premium text effects cover both heading details and large statement sections: curved scrolling paths, spiralling 3D lettering, unfolding paper, split reveals, scramble, glitch, pointer reactions and words with physical weight. Choose a treatment that gives your message the right pace and space.

More text and typography effects

Cursor and hover examples

Custom cursors and hover interactions are the signature of award-winning agency sites. Most run on GSAP core alone and stay smooth during fast mouse movement; the drag and throw pieces add Draggable and InertiaPlugin.

More cursor and hover effects

Image and gallery examples

Galleries and image strips are where motion meets content. These effects cover draggable galleries, spectral WebGL sliders, image masks, tactile cloth and rubber, and playful filters that turn a portrait into a funhouse mirror.

More image and gallery effects

Cards and layout examples

When elements need to move between positions, layouts, or states, GSAP’s Flip plugin, pointer input, and physical constraints do the heavy lifting. The examples below cover stacked cards, swipeable decks, shared-element morphs, grid entrances, interactive surfaces, collectible cards, a curling book, and an event pass hanging from a simulated lanyard.

Browse the full effects library

Canvas and particle examples

Canvas rendering supports everything from interactive product models to particle fields and generative surfaces. These examples use either the 2D canvas API or three.js, with each effect documenting what GSAP animates and what the renderer draws.

More canvas and particle effects

Background and ambient examples

These backgrounds use gradients, blend modes, scroll position and shaders to add atmosphere while keeping the content above them readable.

More background and ambient effects

Loaders and page transitions

The first animation a visitor sees is the load itself, and the same curtain and mask craft drives the overlays a site opens later. The effects below cover both.

More loaders and page transitions

How to choose the right example

With 123 options, start by narrowing on two axes.

By difficulty. If you are new to GSAP, the beginner effects are the fastest wins: the free Scroll Progress, Typewriter Text, Parallax Hero, Image Clip Reveal, Hover Underline, and Scroll Text Highlight examples above, plus Count-Up Stats and CSS Scroll Reveal. Intermediate effects like the 3D Card Flip, Split Text Reveal, Draggable Card Stack, SVG Blob Morph, Scroll Zoom Portal, Grid Shockwave, and Horizontal Scroll Section add configuration and interaction. The advanced tier, Liquid Morph, Text Hover Distortion, the 3D Ring Gallery, and the two canvas systems, involves shaders, physics, or per-frame rendering.

By plugin. Most scroll effects need only core GSAP plus ScrollTrigger, both free on the official GSAP CDN. A few reach for specialised plugins: Split Text Reveal uses SplitText, FLIP Layout Morph uses Flip, the Infinite Draggable Gallery uses Observer, the Draggable Card Stack and 3D Ring Gallery use Draggable with InertiaPlugin, and the SVG Blob Morph uses MorphSVGPlugin. All of these are now free to use. The cursor, canvas, and hover effects run on GSAP core alone with no plugins at all.

Whichever you pick, the accessibility baseline is the same across every example: check prefers-reduced-motion, keep animations off the main thread by sticking to transform and opacity, and provide a clean teardown so the effect works inside single-page apps.

Ready to build? The ten free examples above are yours to copy right now. For the full production versions of all 123, with every trigger mode, configuration option, and edge case handled, browse the complete effects library or get everything at once with the Vault. New to GSAP entirely? Start with the getting started guide for setup, registration, and your first tween.

From an effect to a finished page

An isolated effect lets you judge the movement. The next decision is where it belongs in the page and what the visitor needs to do there.

For a portfolio, the Creative Portfolio Template shows a complete composition: a text reveal introduces the studio, a grid presents the work, and horizontal case studies give selected projects more room. Open it with your own content in mind. A project with a long explanation may belong in a normal reading section even when the shorter case studies work sideways. The GSAP templates guide covers what a complete template gives you over assembling single effects.

For an application, choose a control by the task it helps someone finish. The UI elements library includes a Draggable Bottom Sheet for details or filters over a mobile view, and a Cmd+K Command Palette for finding and running actions. These are useful when the problem is navigation, selection or feedback inside an interface.

If you can make something move but are unsure what deserves attention, the interactive courses start with a free visual hierarchy course. You practise content order, type, spacing and the primary action before moving on to colour, layout or motion. That gives you a way to judge the page around the animation as well as the animation itself.