Scroll Animation with ScrollTrigger (GSAP)

Here’s how to make scroll animation with ScrollTrigger by GSAP .

What is ScrollTrigger?

• It only plays when that element is in the viewport
• Embed scroll triggers directly into any GSAP animation (including timelines)
• Accommodates vertical or horizontal scrolling
• Automatically recalculates positions when the window resizes
• Incredible flexibility for defining scroll positions

Check other features at Official Document .

Install

You can see how to install or start ScrollTrigger at GSAP Installation .

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

npm

npm install gsap

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

Example 1. Simple Animation

This is simple fade-in scroll animation.
Demo（CodePen）

Text and images will fade in and move from bottom to up/from right to left with fromTo . This animation will play only once.

gsap.fromTo(".image", {
  x: 50,
  opacity: 0,
}, {
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
  },
  x: 0,
  opacity: 1,
});

gsap.fromTo(".text", {
  y: 50,
  opacity: 0,
}, {
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
  },
  y: 0,
  opacity: 1,
});

About ScrollTrigger Options

• trigger : it plays when the selected element enters the viewport
• start : which part of trigger and which position of the viewport makes it play

In this demo, it plays when the top of trigger reaches the center of the viewport.

scrollTrigger: {
  trigger: ".box",
  start: "top center",
},

If you set markers: true option, you can see the markers on the right of window.

If you set scrub: true , it plays same timing with the scrollbar. If you set a number like scrub: 0.5 , it plays in 0.5 seconds following the scrollbar.

Example 2. Reading Progress Bar

This progress bar shows how much scrolling on page or blog article.
Demo（CodePen）

Create div for a progress bar. And add class name to article element for using as trigger later.

<div class="progress"></div>
<article class="article">
  article
</article>

Add style of when scrolled to the end of article on css. And add position: sticky; to show the progress bar on the window.

.progress {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background-color: #8bd3dd;
}

Create animation using GSAP from() .

gsap.from(".progress", {
  scaleX: 0,
  transformOrigin: "left center",
  ease: "none"
});

Add ScrollTrigger options to GSAP. The trigger is .article . It plays when the top of .article reaches the viewport 72px, and ends when the bottom of .article reaches the bottom of viewport.

gsap.from(".progress", {
  scrollTrigger: {
    trigger: ".article",
    scrub: true,
    start: "top 72px",
    end: "bottom bottom",
  },
  scaleX: 0,
  transformOrigin: "left center",
  ease: "none"
});

Here’s whole codes on demo page.
Demo（CodePen）

Example 3. Change Background Color

Change background-color while scrolling.
Demo（CodePen）

Add background-color after change on css.

.change {
  background-color: #8bd3dd;
}

Create animation with GSAP.

gsap.from(".change", {
  duration: 0.5,
  backgroundColor: "#fef6e4",
  ease: "none"
});

Add ScrollTrigger options on GSAP. The trigger is .change . It starts the middle of section and ends at the bottom of section.

gsap.from(".change", {
  scrollTrigger: {
    trigger: ".change",
    start: "center center",
    end: "bottom bottom",
    scrub: true,
  }, 
  duration: 0.5,
  backgroundColor: "#fef6e4",
  ease: "none",
});

Here’s whole codes on demo page.
Demo（CodePen）

Example 4. Switched Text and Images Animation

This animation uses GSAP Timeline.
Demo（CodePen）

References

• GreenSock | Docs | Plugins | ScrollTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger（2023-2-5参照）