GSAP Animation Skill File Organization : This skill uses split structure. See references/ for advanced patterns. 1. Overview This skill provides GSAP (GreenSock Animation Platform) expertise for creating smooth, professional animations in the JARVIS AI Assistant HUD. Risk Level : LOW Animation library with minimal security surface Primary Use Cases : HUD panel entrance/exit animations Status indicator transitions Data visualization animations Scroll triggered effects Complex timeline sequences 2. Core Responsibilities 2.1 Fundamental Principles 1. TDD First : Write animation tests before implementation 2. Performance Aware : Use transforms/opacity for GPU acceleration, avoid layout thrashing 3. Cleanup Required : Always kill animations on component unmount 4. Timeline Organization : Use timelines for complex sequences 5. Easing Selection : Choose appropriate easing for HUD feel 6. Accessibility : Respect reduced motion preferences 7. Memory Management : Avoid memory leaks with proper cleanup 2.5 Implementation Workflow (TDD) Step 1: Write Failing Test First Step 2: Implement Minimum to Pass Step 3: Refactor Following Patterns Step 4: Run Full Verification 3. Technology Stack & Versions 3.1 Recommended Versions Package Version Notes gsap ^3.12.0 Core library @gsap/vue ^3.12.0 Vue integration ScrollTrigger included Scroll effects 3.2 Vue Integration 4. Implementation Patterns 4.1 Panel Entrance Animation 4.2 Status Indicator Animation 4.3 Data Visualization Animation 4.4 Timeline Sequence 4.5 Scroll Triggered Animation 5. Quality Standards 5.1 Performance 5.2 Accessibility 6. Performance Patterns 6.1 will change Property Usage 6.2 Transform vs Layout Properties 6.3 Timeline Reuse 6.4 ScrollTrigger Batching 6.5 Lazy Initialization 7. Testing & Quality 7.1 Animation Testing 8. Common Mistakes & Anti Patterns 8.1 Critical Anti Patterns Never: Skip Cleanup Never: Animate Layout Properties 13. Pre Implementation Checklist Phase 1: Before Writing Code [ ] Write failing tests for animation behavior [ ] Define animation timing and easing requirements [ ] Identify elements that need will change hints [ ] Plan cleanup strategy for all animations [ ] Check if reduced motion support is needed Phase 2: During Implementation [ ] Use transforms/opacity only (no layout properties) [ ] Store animation references for cleanup [ ] Apply will change before, remove after animation [ ] Use timelines for sequences [ ] Batch ScrollTrigger animations [ ] Implement lazy initialization for complex animations Phase 3: Before Committing [ ] All tests pass (npm test grep "Animation") [ ] All animations cleaned up on unmount [ ] Reduced motion preference respected [ ] No memory leaks (check with DevTools) [ ] 60fps maintained (test with performance monitor) [ ] ScrollTrigger instances properly killed 14. Summary GSAP provides professional animations for JARVIS HUD: 1. Cleanup : Always kill animations on unmount 2. Performance : Use transforms and opacity only 3. Accessibility : Respect reduced motion preference 4. Organization : Use timelines for sequences Remember : Every animation must be cleaned up to prevent memory leaks. References : references/advanced patterns.md Complex animation patterns