
Here’s how to make scroll animation with [ScrollTrigger](https://greensock.com/scrolltrigger/) by [GSAP](https://greensock.com/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](https://greensock.com/docs/v3/Plugins/ScrollTrigger) .

## Install

You can see how to install or start ScrollTrigger at [GSAP Installation](https://greensock.com/docs/v3/Installation) .

### CDN

```html
<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

```bash
npm install gsap
```

```js
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）](https://codepen.io/chocolat5/pen/OJwqMJv)

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

```js
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.

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

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

![](./scroll-trigger-simple-sample.gif)

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）](https://codepen.io/chocolat5/pen/MWBxqZa)

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

```html
<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.

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

Create animation using GSAP `from()` .

```js
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.

```js
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）](https://codepen.io/chocolat5/pen/MWBxqZa)

## Example 3. Change Background Color

Change `background-color` while scrolling.  
[Demo（CodePen）](https://codepen.io/chocolat5/pen/GRBezbg)

Add background-color after change on css.

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

Create animation with GSAP.

```js
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.

```js
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）](https://codepen.io/chocolat5/pen/GRBezbg)

## Example 4. Switched Text and Images Animation

This animation uses GSAP Timeline.  
[Demo（CodePen）](https://codepen.io/chocolat5/pen/eYjZeRJ)

## References

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


Scroll Animation with ScrollTrigger (GSAP)

Tags