Performance and accessibility.
Every component ships reduced-motion aware and within a performance budget. Here's what that means, and how to keep it that way in your build.
Respecting the preference
Every component reads the operating-system reduced-motion setting through gsap.matchMedia(). When a visitor has motion reduced, the component collapses its timeline to nearly instant. The end state still renders. The journey to it doesn't.
You get this for free.
The budget every component keeps
Components animate only properties the GPU can move cheaply, so motion stays at 60fps without forcing layout.
- Animate
x,y,scale,rotation,opacity, andclip-pathonly. - Never animate
width,height,top,left, margin, or padding - they force layout every frame. force3D: trueon animated elements;gsap.quickTo()for anything driven by mousemove or scroll.
Lighter on small screens
Components scope heavier effects to where they make sense. WebGL and high-cost canvases are skipped at the React render level on small screens rather than mounted and hidden, so the work never runs. When you adapt a component, keep expensive paths behind the same checks.
Tearing down on unmount
In React, components run inside useGSAP, which scopes every tween and cleans them up automatically. When you add your own animations, return a cleanup function that kills timelines, reverts SplitText, and kills any ScrollTriggers.
Use the current GSAP API.
SplitText.create(). The old new SplitText() constructor is deprecated as of GSAP 3.13.