← Knowledge Base
MotionGSAPUX

Kinetic Shells and Scroll Cinema

How GSAP ScrollTrigger chapter reveals and a kinetic page wrapper deliver premium motion without trapping scroll behind overflow-hidden.

PNPriya NairDeveloper Experience6 min · Updated 2026-07-19

Shell vs chapter scope

The kinetic shell owns the canvas and status header. Chapter scopes inside pages run ScrollTrigger reveals without nesting a second WebGL context or Lenis instance.

Never trap the scroll root

overflow-hidden on html, body, or the root main wrapper breaks wheel input and pins. Keep cinematic clips local to sections with their own containing blocks.

Entrance once, then rest

Mount animations should fire once. Continuous looping motion in content layers reads as noise and burns battery on founder laptops during long diligence calls.