10 GSAP Scroll Animations You Can Copy-Paste into Any Project (2026)

Scroll animations separate amateur websites from Awwwards-level experiences. But building them from scratch takes hours of tweaking timing, easing, and scroll positions. These 10 GSAP ScrollTrigger animations are production-ready — preview them live on Glance, then copy the source code directly into your project.

Every animation below uses GSAP ScrollTrigger, the industry-standard library trusted by Disney, Nike, Google, and the majority of Awwwards Site of the Day winners. They work in both Vanilla JS (Vite) and React/Next.js.

1. Parallax Hero Section

The parallax hero is the single most impactful scroll animation you can add to any landing page. Background elements move at different speeds than foreground content, creating a sense of depth that immediately signals "premium" to visitors.

With GSAP ScrollTrigger, you pin the hero section and animate layers at different rates using scrub: true to tie the animation directly to scroll progress. The result is buttery-smooth parallax that works across all browsers and devices.

gsap.to(".hero-bg", {
  y: -200,
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    end: "bottom top",
    scrub: 1,
  }
});

gsap.to(".hero-content", {
  y: -100,
  opacity: 0,
  scrollTrigger: {
    trigger: ".hero",
    start: "center center",
    end: "bottom top",
    scrub: 1,
  }
});

Preview the full parallax hero animation on Glance →

2. Reveal-on-Scroll Sections

Content that fades in or slides up as you scroll is the bread and butter of modern web design. GSAP's ScrollTrigger makes this trivial — set a trigger point, define the animation, and the library handles the rest. The key is in the easing: power3.out gives that satisfying deceleration you see on high-end sites.

gsap.utils.toArray(".reveal-section").forEach((section) => {
  gsap.from(section, {
    y: 80,
    opacity: 0,
    duration: 1.2,
    ease: "power3.out",
    scrollTrigger: {
      trigger: section,
      start: "top 85%",
      toggleActions: "play none none reverse",
    }
  });
});

3. Sticky Cards Stack

Sticky stacking cards are a premium design pattern where cards pin to the top of the viewport and stack as you scroll, revealing the next card underneath. You see this on Apple product pages and high-end agency portfolios. This requires GSAP's pin feature combined with careful z-index management.

The trick is pinning each card at the same position while adjusting paddingTop so they visually stack. GSAP handles the math for you with pinSpacing: false.

4. Horizontal Scroll Gallery

Horizontal scroll converts vertical scrolling into horizontal movement — a showstopper effect for portfolios and image galleries. The implementation uses a pinned container with a wide inner element that translates horizontally based on scroll progress.

const sections = gsap.utils.toArray(".panel");
gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-container",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth,
  }
});

5. Text Reveal Character-by-Character

Character-by-character text reveals are the signature of Awwwards-winning typography. Split each character into a <span>, then stagger the animation as the text scrolls into view. Combined with clip-path or translateY, this creates the "text pouring in" effect you've seen across award-winning sites.

Glance includes multiple text reveal variations — line-by-line, word-by-word, and character-by-character — ready to drop into your project.

6. Scroll-Driven Progress Bar

A scroll progress indicator at the top or bottom of the page is a subtle UX improvement that also demonstrates GSAP's ability to create decorative, scroll-linked UI elements. Pair scrub: true with a scaleX animation on a fixed-position bar.

7. Image Scale and Fade

Images that scale from slightly zoomed-in and fade to full opacity as you scroll past create a cinematic feel. This is the easiest animation to add for maximum visual impact. Use scale: 1.2 as the starting state and animate to scale: 1 with a clip-path reveal.

8. Counter/Number Animation on Scroll

Stats sections with animated counters that tick up as you scroll past are a proven conversion booster. GSAP can animate any numeric property with snap to ensure clean integer display.

gsap.from(".counter", {
  textContent: 0,
  duration: 2,
  ease: "power1.out",
  snap: { textContent: 1 },
  scrollTrigger: {
    trigger: ".stats-section",
    start: "top 80%",
  }
});

9. Section Pinning with Timeline

Pinning a section and running a full GSAP timeline while the user scrolls through it is the most powerful scroll animation technique. This is how Apple builds their product storytelling pages — one section stays fixed while content within it transforms, fades, and repositions based on scroll progress.

10. Smooth Scroll with Lenis + GSAP

Every Awwwards site in 2026 uses smooth scrolling. Lenis provides the smooth scroll foundation, while GSAP ScrollTrigger handles the animations. Together, they create the ultra-polished scroll experience users expect from high-end websites.

import Lenis from "lenis";

const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);

Stop Building From Scratch

Every animation above (and 120+ more) is available on Glance as a complete, ready-to-use component. Preview any animation live in your browser, download the full source code, and drop it into your project. No npm package to install. No dependency lock-in. Just clean, production-ready code.

Starter access starts at $3.99 for 50+ animations. Plus at $9 for 80+ animations. Pro lifetime at $19 for all 130+ animations plus every future addition. Every animation includes the complete HTML, CSS, and JavaScript source code.

Browse the Full Library →