Chapter 184: Force GSAP to Update in a Hidden Tab (Helper)

Core Idea

Browsers pause requestAnimationFrame in background tabs to save battery/CPU, which pauses GSAP's ticker too; this helper keeps GSAP advancing at a reduced rate (~2fps, via a throttled setInterval) while the tab is hidden, using the Page Visibility API to switch modes.

Key Concepts

• tickGSAPWhileHidden(true) enables it; tickGSAPWhileHidden(false) removes the listener and clears the interval.
• Listens to the visibilitychange event: when hidden, disables GSAP's lag smoothing (gsap.ticker.lagSmoothing(0)) and manually calls gsap.ticker.tick() via setInterval; when visible again, restores normal lag smoothing.

Code Examples

tickGSAPWhileHidden(true);

Key Takeaways

1. Without this, any timers/animations relying on GSAP's ticker effectively freeze while the tab is backgrounded.
2. Disabling lag smoothing while hidden is important — otherwise GSAP would try to "catch up" abruptly when the tab regains focus.

Connects To

• gsap.ticker, gsap.ticker.lagSmoothing(): the core APIs this helper manipulates directly.