Chapter 368: ScrollTrigger.refresh

Core Idea

Recalculates the positioning of all of the ScrollTriggers on the page; this typically happens automatically when the window/scroller resizes but you can force it by calling ScrollTrigger.refresh()

Key Concepts

• safe: Boolean

• A "refreshInit" event is dispatched
• Any pinned elements are temporarily reverted to their non-pinned state (their natural place in the document flow)
• If scrub is enabled, the animation gets temporarily reset to its beginning
• The ScrollTrigger's start and end positions are recalculated based on the current DOM (natural flow). This also means that if you used a function-based value for start or end, it will be called.
• Any pinned elements and animations are re-enabled according to the new position/progress.
• An update() is called which will trigger any appropriate callbacks if the progress changed.
• The ScrollTrigger instance's onRefresh callback fires.

Code Examples

ScrollTrigger.addEventListener("refreshInit", function () {
  // this code will run BEFORE the refresh
});

ScrollTrigger.addEventListener("refresh", function () {
  // this code will run AFTER all ScrollTriggers refreshed.
});

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

Key Takeaways

1. safe: Boolean

2. A "refreshInit" event is dispatched
3. Any pinned elements are temporarily reverted to their non-pinned state (their natural place in the document flow)
4. If scrub is enabled, the animation gets temporarily reset to its beginning
5. The ScrollTrigger's start and end positions are recalculated based on the current DOM (natural flow).

Connects To

• add a listener: see ch350 — ScrollTrigger.addEventListener
• ScrollTrigger.removeEventListener(): see ch369 — ScrollTrigger.removeEventListener