Chapter 350: ScrollTrigger.addEventListener
Core Idea
Add a listener for any of the following events: "scrollStart", "scrollEnd", "refreshInit", "revert", "matchMedia", or"refresh" which get dispatched globally when any such ScrollTrigger-related event occurs (it is not tied to a particular instance).
Key Concepts
-
type: String
-
callback: Function
- "matchMedia" - when a ScrollTrigger.matchMedia() breakpoint is reached and finishes executing.
- "refreshInit" - typically just after a resize occurs and BEFORE ScrollTrigger does all of its recalculating of start/end values in the [new] document flow. This will also happen when you call ScrollTrigger.refresh() directly.
- "refresh" - immediately after ScrollTrigger finishes all of its recalculations of start/end values when a refresh occurs (typically after a resize event or when ScrollTrigger.refresh() is called directly).
- "revert" - when ScrollTrigger reverts the page to its original state, after it has removed all of its pinning spacers, etc. This typically happens between a "refreshInit" event and a "refresh" event.
- "scrollStart" - when any ScrollTrigger-related scroller begins scrolling
- "scrollEnd" - when any ScrollTrigger-related scroller stops scrolling (when roughly 200ms elapses since the last "scroll" event AND the user doesn't have a pointer/mouse pressed on the document/scrollbar)
Code Examples
ScrollTrigger.addEventListener("scrollEnd", () =>
console.log("scrolling ended!")
);
- What it demonstrates: typical usage of ScrollTrigger.addEventListener in a GSAP animation.
Key Takeaways
-
type: String
-
callback: Function
- "matchMedia" - when a ScrollTrigger.matchMedia() breakpoint is reached and finishes executing.
- "refreshInit" - typically just after a resize occurs and BEFORE ScrollTrigger does all of its recalculating of start/end values in…
- "refresh" - immediately after ScrollTrigger finishes all of its recalculations of start/end values when a refresh occurs (typically…
Connects To