What problem does it solve? GSAP animations often suffer from jank, dropped frames, and layout thrashing when they animate layout-heavy properties like width, height, top, or left. This Skill diagnoses those performance problems and rewrites animations to run on the compositor thread for smooth 60fps playback, even on low-end devices. ## Core Features & Use Cases - Compositor-Friendly Animation: Replaces layout-triggering properties (width, height, top, left, margin, padding) with GPU-accelerated transforms (x, y, scale, rotation) and opacity. - Efficient Update Patterns: Applies will-change hints only where needed, uses gsap.quickTo() for frequently updated properties like mouse followers, and batches reads/writes to avoid layout thrashing. - ScrollTrigger & Timeline Optimization: Consolidates scattered tweens into timelines, tunes scrub and pin settings, and debounces ScrollTrigger.refresh() calls. - Use Case: A landing page with a laggy scroll-driven hero animation and a jittery mouse-follower cursor gets refactored so both run at a stable 60fps on mid-range phones. ## Quick Start Ask the assistant to review your GSAP animation code and optimize it for 60fps performance by replacing layout properties with transforms and opacity.
