Framer Motion vs GSAP with Claude Code: The 2026 Web Animation Playbook

css-animations by heygen-com (72,386 installs, skills.sh registry) is the most-installed dedicated animation skill for Claude Code, ahead of animejs (70,083 installs) and waapi (68,770 installs) from the same suite. Together these three skills — all part of HeyGen's hyperframes collection — cover the three dominant animation approaches in 2026. The skills.sh catalog tracks 100+ animation-tagged skills across 25,215 total listings and 91.5 M total installs.

What are the main web animation options in Claude Code?

The catalog's animation skills fall into four layers, from lightest to heaviest:

CSS + Web Animations API (no library):

• css-animations by heygen-com — 72,386 installs. Teaches Claude Code to write @keyframes, transitions, and animation shorthand for simple motion without a library.
• waapi by heygen-com — 68,770 installs. Uses the browser-native Web Animations API (element.animate()); zero bundle cost, same power as CSS, imperative control.

Micro-library:

• animejs by heygen-com — 70,083 installs. Anime.js — 14 kB gzipped, timeline-based, works on CSS properties, DOM attributes, and SVG. Best for complex multi-step sequences without a framework dependency.

React-first (Framer Motion):

• framer-motion-animator by patricio0312rev — 6,502 installs. Framer Motion patterns — motion.div, AnimatePresence, layout animations, gesture-based interactions. As of 2026, rebranded to the motion package (59.1 kB gzipped).
• motion-patterns by affaan-m — 1,301 installs. Curated patterns for useMotionValue, useTransform, and viewport-triggered animations.
• vercel-react-view-transitions by vercel-labs — 58,957 installs. React View Transitions API — browser-native page-transition animations, zero library, ships in Chrome 111+ and Safari 18.

Three.js / 3D:

• three by heygen-com — 69,388 installs. Three.js scene setup, camera, lighting, and mesh animation patterns.

When should I use Framer Motion vs GSAP vs CSS?

| Scenario | Best choice | Skill to load | |---|---|---| | React component enter/exit | Framer Motion | framer-motion-animator | | Page transitions (Next.js) | View Transitions | vercel-react-view-transitions | | Complex multi-element sequence | Anime.js | animejs | | Scroll-triggered parallax | GSAP ScrollTrigger | gsap-framer-scroll-animation | | Simple hover/focus | CSS transition | css-animations | | 3D scene | Three.js | three | | No-library constraint | WAAPI | waapi |

Framer Motion's 35.6 M weekly downloads (npm, June 2026) make it the most-used React animation library, but its 59.1 kB bundle and React dependency make it wrong for non-React contexts. GSAP (1.8 MB full, ~30 kB core) handles framework-agnostic complex timelines that nothing else matches.

What is the Web Animations API and why is it trending?

The WAAPI (element.animate()) is a browser-native animation engine that ships in all modern browsers with no bundle cost. The waapi skill (68,770 installs) teaches Claude Code patterns like:

``javascript element.animate( [{ transform: 'translateY(0)' }, { transform: 'translateY(-8px)' }], { duration: 200, easing: 'ease-out', fill: 'forwards' } ); ``

In 2026, WAAPI is trending because it pairs with the View Transitions API for zero-dependency page animations. The vercel-react-view-transitions skill (58,957 installs) combines both in a React context.

How does the optimize skill improve animation performance?

optimize by pbakaus (81,972 installs, part of the impeccable collection with 35,961 GitHub stars) is not an animation-specific skill — but it is the most important skill to load alongside any animation work. It teaches Claude Code to:

• Use will-change: transform and transform: translate3d() to trigger GPU compositing.
• Audit for layout-triggering properties (width, height, top, left) in animations and replace them with transform equivalents.
• Check for requestAnimationFrame vs setTimeout usage in imperative animations.

An animation that doesn't run at 60 fps is worse than no animation. Load optimize after any animation skill to catch performance regressions before they ship.

What are scroll-triggered animations in 2026?

Scroll-triggered motion is the top animation trend this year — sections that animate in as they enter the viewport. Three approaches:

1. CSS `@scroll-timeline` + `animation-timeline` — browser-native, no library, supported in Chrome 115+ and Firefox 110+. The css-animations skill (72,386 installs) includes patterns. 2. GSAP ScrollTrigger — the most capable option for parallax, pin-and-scrub, and sequence synchronisation. The gsap-framer-scroll-animation skill (1,457 installs) covers both GSAP and Framer Motion scroll variants. 3. Framer Motion `whileInView` — simple viewport-entry animations in React with two props. The framer-motion-animator skill covers this pattern.

For most landing pages, CSS animation-timeline covers 80% of use cases with zero bundle cost. Use GSAP when you need timeline scrubbing or complex multi-element choreography.

Key takeaways

• css-animations by heygen-com (72,386 installs) is the most-installed animation skill; for zero-library projects, pair it with waapi (68,770 installs) to cover both declarative and imperative animation.
• animejs by heygen-com (70,083 installs) is the best micro-library choice for complex multi-step sequences in non-React contexts.
• Framer Motion (framer-motion-animator, 6,502 installs) leads for React — 35.6 M weekly npm downloads — but adds 59.1 kB to the bundle; the View Transitions API (vercel-react-view-transitions, 58,957 installs) offers zero-bundle page transitions.
• Load optimize by pbakaus (81,972 installs) alongside any animation skill to catch GPU compositing issues and layout-triggering property violations.
• Scroll-triggered motion is the top trend in 2026; CSS animation-timeline handles most cases with no library; GSAP ScrollTrigger is the fallback for complex sequences.

Common questions