Agent skill · design visual · aiskillstore
gsap-animations
GSAP animation best practices for web design - scroll triggers, performance optimization, accessibility, responsive animations, and testing integration. Use when implementing or reviewing animations on WordPress or any web project.
Why this skill is useful
Provides specific GSAP animation patterns and performance optimization techniques that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 WordPress Enqueue --- Animation Patterns 1. Fade In on Scroll 2. Staggered Elements 3. Parallax Effect 4. Text Reveal (Line by Line) 5. Curtain/Mask Reveal 6. Hero Animation Timeline --- Accessibility Respect Reduced Motion CSS Fallback Add JS Class to HTML --- Responsive Animations Breakpoint-Aware Animations Refresh on Resize --- Performance Optimization 1. Use Transform Properties Only 2. Batch Similar Animations 3. Kill Unused ScrollTriggers 4. Lazy Initialize --- ScrollTrigger Best Practices 1. Proper Start/End Points 2. Pin Sections Carefully 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/gsap-animations