Next ❯

ScrollTrigger Animation in GSAP

  • Learn how to trigger animations on scroll using GSAP ScrollTrigger with simple syntax, real UI examples, and best practices.

  •  Introduction

    ScrollTrigger is a GSAP plugin that lets you control animations based on the user’s scroll position.

    Why use ScrollTrigger?

    • Animate elements when they enter the viewport

    • Create modern scroll-based websites

    • Build storytelling, product pages, and portfolios

    Where it is commonly used

    • Landing pages

    • Product showcase websites

    • Portfolio animations

    • Section-based scroll effects

Syntax / Basic Concept

ScrollTrigger connects scroll position with GSAP animations. 

gsap.to(".box", {
  x: 300,
  scrollTrigger: ".box"
});

  • How it works

    • When .box enters the viewport

    • The animation starts automatically

    • Scroll controls when the animation plays

  • Parameters / Options

    PropertyMeaningDefault
    triggerElement that triggers animationnone
    startWhen animation starts"top bottom"
    endWhen animation ends"bottom top"
    scrubSync animation with scrollfalse
    pinFix element during scrollfalse
    markersShow start/end markersfalse

Practical Examples

Fade In on Scroll 

gsap.from(".card", {
  opacity: 0,
  y: 50,
  duration: 1,
  scrollTrigger: {
    trigger: ".card",
    start: "top 80%"
  }
});

Scroll-Linked Animation (Scrub) 

gsap.to(".progress", {
  width: "100%",
  scrollTrigger: {
    trigger: ".section",
    scrub: true
  }
});

  •  Common Mistakes


    1. ❌ Forgetting to register ScrollTrigger

    gsap.registerPlugin(ScrollTrigger);

    1. ❌ Trigger element not present in DOM

    2. ❌ Using wrong start/end values

    3. ❌ Overusing scrub causing performance issues

    4. ❌ Not testing on different screen sizes

  • 6. Best Practices

    • Always use markers: true while learning

    • Keep animations lightweight

    • Avoid too many pinned sections

    • Use start: "top 80%" for smooth UX

    • Test scrolling on mobile devices

  • Comparison


    FeatureGSAP ScrollTriggerCSS Scroll
    ControlHighLimited
    Scrub animationYesNo
    Pin elementsYesNo
    Timeline supportYesNo
    PerformanceExcellentMedium
Lesson image

  • Quick Summary

    • ScrollTrigger animates elements based on scroll

    • Works with GSAP timelines

    • Supports pinning, scrubbing, and triggers

    • Ideal for modern interactive websites

Next ❯