CSS Scroll-Driven Animations vs GSAP with Claude Code: The 2026 Decision Guide

gsap-plugins (22,512 installs, skills.sh registry) is the top-installed animation skill in the Claude Code catalog — and for complex, timeline-sequenced animations it remains the right tool in 2026. But the landscape shifted significantly: native CSS scroll-driven animations, now fully supported across all major browsers, handle the 80% of scroll effects that previously required GSAP ScrollTrigger or an IntersectionObserver setup. The Skillselion catalog tracks 6+ animation skills across 66,520 total listings and 94.6 million total installs.

When do you need GSAP vs native CSS scroll animations?

The decision tree is straightforward:

Choose native CSS scroll-driven animations when:

• You need entrance reveals on scroll (fade-in, slide-up)
• You want a scroll progress indicator (reading progress bar)
• You're building parallax effects purely tied to scroll position
• You want sticky header transformations as the user scrolls
• You need zero JavaScript overhead and maximum performance

Choose GSAP (`gsap-plugins`, 22,512 installs, skills.sh) when:

• You need timeline sequencing (animate A, then B, then C with stagger)
• Your animation responds to hover, click, or other events alongside scroll
• You need to scrub video playback to scroll position
• You're using Flip plugin for FLIP-based layout animations
• You need complex SVG path animations or morphing

The gsap-plugins skill teaches Claude Code to reach for GSAP precisely for these scenarios. The web-animation-design skill (514 installs, skills.sh) covers native CSS alternatives. Together they give Claude Code a discrimination layer — it generates native CSS by default and imports GSAP only when the use case genuinely needs it.

How do CSS scroll-driven animations work technically?

The two core CSS properties are animation-timeline and animation-range:

```css / Entrance animation triggered by viewport entry / @keyframes slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.section { animation: slide-up linear both; animation-timeline: view(); / ties to element's visibility / animation-range: entry 0% entry 60%; / plays as element enters view / } ```

animation-timeline: view() ties the animation progress to the element's position in the viewport. animation-range: entry 0% entry 60% means "play from when the element starts entering the viewport to when 60% is visible."

For a scroll progress bar: ```css .progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: var(--color-brand-primary); transform-origin: left; animation: grow-x linear; animation-timeline: scroll(root); / ties to root document scroll / animation-range: 0% 100%; }

@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } ```

This scroll progress bar has zero JavaScript and is GPU-composited — it never triggers layout recalculation. The web-animation-design skill (skills.sh) includes this pattern and the modern-css-container-queries-2026 guide covers related CSS modern features.

How does GSAP ScrollTrigger differ from native scroll animations?

GSAP's ScrollTrigger plugin (gsap-plugins, 22,512 installs) gives you JavaScript callbacks alongside the animation:

``js gsap.fromTo('.hero-text', { y: 50, opacity: 0 }, { y: 0, opacity: 1, scrollTrigger: { trigger: '.hero-text', start: 'top 80%', onEnter: () => analytics.track('hero_visible'), onLeave: () => pauseVideo() } } ) ``

The onEnter, onLeave, and onToggle callbacks let you run JavaScript when scroll thresholds are crossed. This is what native CSS scroll animations cannot do — they're pure CSS with no JS hooks. The gsap-plugins skill encodes the ScrollTrigger API including scrub, pin, and snap which have no CSS equivalents.

For timeline-orchestrated sequences with stagger, GSAP's superiority is clear:

``js // Stagger 6 cards entering the viewport — no CSS equivalent gsap.from('.card', { y: 40, opacity: 0, stagger: 0.1, scrollTrigger: { trigger: '.card-grid', start: 'top 70%' } }) ``

The gsap-timeline skill (61,380 GitHub stars, 1,049 installs, skills.sh registry) teaches Claude Code this timeline + ScrollTrigger composition pattern.

What does the Framer Motion motion skill add?

The motion skill (841 GitHub stars, 788 installs, skills.sh) covers the Motion library (formerly Framer Motion), which handles React-native animation with a declarative API:

```tsx import { motion, useScroll, useTransform } from 'motion/react'

function ParallaxHero() { const { scrollY } = useScroll() const y = useTransform(scrollY, [0, 300], [0, -100])

return <motion.div style={{ y }}>Parallax content</motion.div> } ```

Motion's useScroll + useTransform gives React components the scroll-linked motion API without manual requestAnimationFrame loops. It's the right choice inside React Server Component architectures where you want declarative, component-scoped animations that don't need the full GSAP ecosystem.

See the Framer Motion vs GSAP guide for the full comparison, and best web animation skills for Claude Code for the complete skill catalog.

Key takeaways

• Native CSS scroll-driven animations are 2026's default for entrance reveals, progress bars, and parallax — zero JS, GPU-composited, fully supported in all major browsers
• The Skillselion catalog's animation skills: gsap-plugins (22,512 installs), gsap-timeline (1,049 installs, 61,380 stars), motion (788 installs), web-animation-design (514 installs) — 66,520 total listings, 94.6M installs
• Use GSAP (gsap-plugins) for timeline sequencing, JS callbacks on scroll thresholds, Flip animations, and SVG morphing — none of which CSS scroll animations support
• Use motion / Framer Motion for React-native declarative animations with useScroll + useTransform
• Claude Code generates native CSS by default with the right skill context; falls back to GSAP only when the use case requires JavaScript interactivity alongside the animation

External resources: CSS scroll-driven animations on MDN · GSAP ScrollTrigger docs

Common questions