# ADR-003: GSAP for Micro-interactions ## Context Modern premium web applications are defined by their motion design. CSS transitions are sufficient for simple hover states, but complex, staggered, timeline-based animations require a dedicated animation engine. ## Decision We chose **GSAP (GreenSock Animation Platform)** over Framer Motion or pure CSS animations. ### Why GSAP? - **Performance:** GSAP is highly optimized for manipulating transforms and opacity, ensuring 60fps animations even on mobile devices. - **ScrollTrigger:** The built-in ScrollTrigger plugin allows for precise scroll-linked animations without the performance overhead of manual scroll event listeners. - **Ecosystem Agnostic:** Unlike Framer Motion (React-only), GSAP works perfectly with our Vanilla JS + Custom MVC stack. ## Consequences ### Positive - Allowed the implementation of the complex "System Telemetry" count-up and fluctuating animations with just a few lines of code. - Enabled staggered reveals for the Command Palette (CMD+K) lists. ### Negative - Adds ~60kb of JavaScript to the initial bundle.