Best Web Animation Skills for Claude Code (2026)

The gsap skill by heygen-com (92,165 installs, skills.sh registry) is the top web animation pick for Claude Code - it loads the full GreenSock Animation Platform API, ScrollTrigger plugin, and timeline composition patterns into the agent's context. For render-to-video workflows, remotion-to-hyperframes (73,589 installs) is the standout new addition: it converts Remotion React animations into shareable Hyperframes clips without a render farm. For pure CSS work, css-animations (72,363 installs) and waapi (68,750 installs) cover keyframe and Web Animations API patterns respectively.

Why does web animation matter for AI coding?

Animation is one of the hardest parts of frontend development for AI agents. Timing, easing, sequencing, and hardware acceleration all require non-obvious implementation choices. Without a skill, Claude Code generates plausible animation code that looks right statically but stutters on scroll, breaks layout, or fails prefers-reduced-motion checks at runtime.

Animation skills solve this by loading proven implementation patterns into the agent's context. They also encode accessibility decisions: every GSAP timeline generated by the gsap skill (92,165 installs, skills.sh registry) wraps state changes in a prefers-reduced-motion media query guard, an opt-in behavior most developers forget.

The skills.sh catalog (25,053 total listings, 81,930,457 total installs) indexes 100+ animation-related skills, with a clear cluster of heygen-com skills dominating the install count leaderboard.

Which web animation skills rank highest on skills.sh?

`gsap` - 92,165 installs, 25,570 GitHub stars (heygen-com). The top web animation skill in the catalog. Loads GSAP's core API plus ScrollTrigger, MorphSVG, and timeline utilities. Claude Code uses it to generate sequenced entrance animations, scroll-linked parallax, and SVG path morphing - with prefers-reduced-motion guards built in. The heygen-com skill package is the most comprehensive GSAP context available in Claude Code.

`remotion-to-hyperframes` - 73,589 installs, 25,570 GitHub stars (heygen-com). The most significant new addition to the animation catalog. Converts Remotion React-based video animations to Hyperframes format for shareable, embeddable clips - no render farm or FFmpeg pipeline required. Use this when you need programmatic video generation: changelog animations, ad creatives, personalized email GIFs, or product demos. Browse the /design/animation hub for related video tools.

`css-animations` - 72,363 installs, 25,570 GitHub stars (heygen-com). The CSS-first animation skill. Covers @keyframes, animation-* properties, cubic-bezier timing functions, and the modern animation-timeline: scroll() API for CSS scroll-driven animations (no JavaScript required). Best for simple UI transitions, loading states, and any project that must minimize JavaScript bundle size.

`animejs` - 70,063 installs, 25,570 GitHub stars (heygen-com). The lightweight JavaScript animation library skill. Anime.js covers DOM animations, SVG path drawing, CSS property tweening, and timeline staggering in a 6KB bundle - dramatically smaller than GSAP. Use this when animation complexity is moderate and bundle size is a constraint.

`three` - 69,369 installs, 25,570 GitHub stars (heygen-com). The Three.js skill for WebGL and 3D animation. Covers scene graph setup, materials, lighting, camera animation, and shader basics. Use this for 3D product visualizations, data globe animations, and any WebGL-driven background that must perform at 60fps on desktop. Pairs with gsap for camera flight paths and scene transitions.

`waapi` - 68,750 installs, 25,570 GitHub stars (heygen-com). The Web Animations API skill. WAAPI is the browser-native JavaScript animation interface - no library required, hardware accelerated, and directly inspectable in DevTools. The skill covers element.animate(), KeyframeEffect, AnimationTimeline, and the ScrollTimeline extension. Best for animations that must be framework-agnostic and zero-dependency.

`gsap-scrolltrigger` - 23,121 installs, 34,620 GitHub stars (greensock). The official ScrollTrigger skill from GreenSock. Covers pinning, scrubbing, batch animations, and snap scroll. If your project centers on scroll-driven storytelling - full-page scroll narratives, parallax reveals, progress indicators - this skill provides the complete ScrollTrigger API context that the general gsap skill touches but doesn't go deep on.

GSAP vs CSS animations vs WAAPI - when to use each?

How does GSAP handle prefers-reduced-motion?

The gsap skill (92,165 installs) includes this pattern in every generated timeline:

const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
  // animation code here
});

This wraps all animation state changes so users who have enabled reduced motion never see the effects. For the full accessibility coverage layer, pair gsap with the web-design-guidelines skill from Best Accessibility Skills for Claude Code.

How do animation skills pair with the design stack?

Animation is the last mile of visual design. The typical stack:

1. high-end-visual-design - sets aesthetic rules including motion choreography expectations (Best Visual Design Skills) 2. Tailwind - utility layout and transition classes (Best Tailwind CSS Skills) 3. css-animations or gsap - animation implementation 4. web-design-guidelines - accessibility audit including motion

See the /design/animation hub for more animation tools and categories.

Key takeaways

• `gsap` (92,165 installs, skills.sh registry) is the #1 web animation skill - covers GSAP core, ScrollTrigger, and prefers-reduced-motion guards.
• `remotion-to-hyperframes` (73,589 installs) is the standout new entry - converts React animation code to shareable video clips without a render pipeline.
• `css-animations` (72,363 installs) is the zero-JS option - use for simple transitions and CSS scroll-driven animations to minimize bundle size.
• `animejs` (70,063 installs) is the lightweight middle ground - full timeline API in 6KB, excellent for SVG and DOM animations.
• `three` (69,369 installs) is the 3D/WebGL pick - 60fps canvas scenes, shader materials, camera animation.
• For accessibility: every GSAP timeline from the skill wraps animations in prefers-reduced-motion guards.

Browse all animation skills at /design/animation or see Best Accessibility Skills for the motion compliance layer.

Common questions