gsap-animationslisted

# GSAP Animation Best Practices Comprehensive guide for implementing professional, accessible, and performant animations using GSAP (GreenSock Animation Platform). ## Core Principles ### 1. Performance First - Animate `transform` and `opacity` only (GPU-accelerated) - Avoid animating `width`, `height`, `top`, `left`, `margin`, `padding` - Use `will-change` sparingly - Target 60fps on all devices ### 2. Accessibility Always - Respect `prefers-reduced-motion` - Ensure content is visible without JavaScript - Don't hide critical content behind animations - Provide skip/pause controls for long animations ### 3. Progressive Enhancement - Content must work without animations - Animations enhance, not replace, functionality - Test with animations disabled --- ## GSAP Setup ### Installation ```html <!-- CDN (recommended for WordPress) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script> <!-- Optional plugins --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollSmoother.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/SplitText.min.js"></script> ``` ### WordPress Enqueue ```php function theme_enqueue_gsap() { // GSAP Core wp_enqueue_script( 'gsap', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js', array(), '3.12.5', true )