gsap-performance
Guides GSAP animation optimization for consistent 60fps output.
Setup & Installation
What This Skill Does
Guides GSAP animation optimization for consistent 60fps output. Covers which CSS properties to animate (transforms and opacity), how to avoid layout thrashing, and when to use tools like gsap.quickTo() and stagger. Applies to both simple tweens and complex scroll-driven sequences.
Instead of trial-and-error profiling, it gives concrete rules for which properties, APIs, and patterns avoid layout and paint costs in GSAP specifically.
When to use it
- Fixing jank in a scroll-triggered animation that drops frames on mid-range devices
- Replacing left/top position tweens with x/y transforms to move work off the main thread
- Setting up a mouse-follower that updates position on every mousemove without spawning new tweens
- Batching DOM reads before GSAP writes to prevent repeated layout recalculation
- Deciding when to call ScrollTrigger.refresh() after dynamic content loads
Similar Skills
ios-application-dev
A reference guide for building iOS apps with UIKit, SnapKit, and SwiftUI.
fullstack-dev
A workflow guide for building full-stack applications, covering backend architecture, frontend-backend integration, auth, real-time features, and production hardening.
android-native-dev
A reference guide for Android native development covering Kotlin/Compose patterns, Material Design 3 specs, Gradle project setup, and build troubleshooting.
frontend-dev
Builds complete frontend pages by combining UI design, scroll animations, AI-generated media assets, and copywriting into a single workflow.