---
name: qierkang/gsap-motion
source: https://app.decimal.ai/s/qierkang-gsap-motion@1/SKILL.md
source_sha256: 02571ae5c5c0
---

# GSAP Motion

1. State the user-experience purpose and choose the smallest motion primitive.
2. Prefer CSS for simple hover, focus, opacity, and one-step transitions.
3. For React, scope selectors, keep animation ownership with the component, and revert contexts on cleanup.
4. Animate transform and opacity where possible.
5. Provide equivalent content and control under prefers-reduced-motion.
6. Test interruption, rapid navigation, resize, unmount, and repeated data updates.

Do not hijack scrolling, delay primary input, animate every element, or hide latency behind an uninterruptible sequence. Register plugins once and verify lifecycle cleanup.