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