tips / javascript
Scroll Animation with ScrollTrigger (GSAP)
February 07, 2023
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 viewportstart
: which part oftrigger
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参照)