Chapter 320: .progress

Core Idea

The progress value of the overall page scroll where 0 is at the very top and 1 is at the very bottom and 0.5 is halfway scrolled. This value will animate during the smooth scrolling and end when the onStop fires.

Code Examples

ScrollSmoother.create({
  smooth: 1,
  onUpdate: (self) => console.log("progress", self.progress),
});

• What it demonstrates: typical usage of .progress in a GSAP animation.

Key Takeaways

1. The progress value of the overall page scroll where 0 is at the very top and 1 is at the very bottom and 0.5 is halfway scrolled. This value will animate during the smooth scrolling and end when the onStop fires.