Motion vs Framer Motion vs GSAP: Best Animation Library (2026)

Web animations in 2026 come down to three main choices: Motion (the evolution of Framer Motion), Framer Motion (legacy API still widely used), and GSAP (the industry workhorse). Here's how they compare.

Quick Comparison

Feature	Motion	Framer Motion (Legacy)	GSAP
Framework	React, vanilla JS	React only	Framework-agnostic
Bundle size	~18KB	~32KB	~25KB (core)
API style	Declarative (JSX)	Declarative (JSX)	Imperative (JS)
Layout animations	Yes	Yes	Manual
Scroll-triggered	Built-in	Built-in	ScrollTrigger plugin
Gestures	Yes	Yes	No (use with others)
SVG animation	Good	Good	Excellent
Complex timelines	Basic	Basic	Excellent
Learning curve	Low	Low	Medium
License	MIT	MIT	Free + commercial
Performance	Excellent	Good	Excellent

Motion (formerly Framer Motion v11+)

Motion is the next evolution of Framer Motion — rewritten to be smaller, faster, and framework-agnostic.

Strengths

• Smaller bundle. ~18KB vs Framer Motion's ~32KB. Significant for performance-conscious apps.
• Framework-agnostic. Works with React, Vue, vanilla JS, and any framework. No longer React-only.
• Layout animations. Automatic animations when elements change position or size. layout prop is magical.
• Scroll animations. Built-in scroll-triggered animations without extra plugins.
• Gesture support. Drag, hover, tap, and pan gestures with animation integration.
• Simple API. <motion.div animate={{ x: 100 }} /> — declarative and intuitive.
• Exit animations. AnimatePresence handles mount/unmount animations cleanly.
• Spring physics. Physically accurate spring animations by default.

Weaknesses

• Complex timelines are harder than GSAP
• Fewer advanced features for production animation (morphing, path drawing)
• Community still transitioning from Framer Motion
• Less suitable for marketing sites with complex scroll narratives

Best For

React applications with UI animations: micro-interactions, page transitions, layout changes, and gesture-driven interfaces.

Framer Motion (Legacy)

Framer Motion (v1-v10) is still widely used and the API most developers know.

Strengths

• Massive community and ecosystem
• Extensive documentation and tutorials
• Battle-tested in production
• Same declarative API as Motion

Weaknesses

• Larger bundle than Motion
• React-only
• Being superseded by Motion
• No new features (maintenance mode)

Best For

Existing projects already using Framer Motion. For new projects, use Motion instead.

GSAP (GreenSock Animation Platform)

GSAP has been the professional web animation standard for over a decade. It's used by agencies, studios, and major brands worldwide.

Strengths

• Timeline system. GSAP's timeline is unmatched. Sequence, stagger, overlap, and orchestrate hundreds of animations with precision.
• ScrollTrigger. The most powerful scroll animation plugin. Pin elements, scrub animations, create parallax effects, and build scroll-driven narratives.
• Performance. Highly optimized. Handles thousands of simultaneous animations without frame drops.
• Framework-agnostic. Works with React, Vue, Svelte, vanilla JS, or anything.
• SVG mastery. MorphSVG, DrawSVG, MotionPath — GSAP dominates SVG animation.
• Ecosystem. ScrollTrigger, Draggable, Flip, SplitText, ScrollSmoother — premium plugins for every use case.
• Easing library. Extensive built-in easings plus custom ease creation.

Weaknesses

• Imperative API. gsap.to('.box', { x: 100, duration: 1 }) — less natural in React's declarative world.
• React integration. Requires useGSAP hook and ref management. More boilerplate than Motion.
• Commercial license. Premium plugins (MorphSVG, SplitText, DrawSVG) require a paid license for commercial use. Core is free.
• Learning curve. The timeline system is powerful but takes time to master.
• Bundle size. Core + ScrollTrigger + other plugins add up quickly.

Best For

Marketing websites, agency work, complex scroll-driven animations, SVG animation, and any project where animation quality is a primary differentiator.

When to Use Each

Use Motion When:

• Building a React/Next.js application
• Need layout animations (elements moving/resizing)
• Want gesture-driven interactions (drag, swipe)
• Page transitions and micro-interactions
• Bundle size matters
• Team wants a simple, declarative API

Use GSAP When:

• Building a marketing site or portfolio
• Complex scroll-driven narratives
• SVG animation (morphing, path animation)
• Sequencing many animations on a timeline
• Agency/studio work where animation quality is paramount
• Framework doesn't matter (or using vanilla JS)

Use Both When:

• React app with a marketing landing page
• Motion for UI interactions, GSAP for hero animations
• They coexist without conflict

Code Comparison

Fade-in on scroll

Motion:

import { motion } from "motion/react"

<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.6 }}
>
  Content
</motion.div>

GSAP:

import { useGSAP } from "@gsap/react"
import gsap from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"

gsap.registerPlugin(ScrollTrigger)

function Component() {
  const ref = useRef(null)
  useGSAP(() => {
    gsap.from(ref.current, {
      opacity: 0, y: 50, duration: 0.6,
      scrollTrigger: { trigger: ref.current, start: "top 80%" }
    })
  })
  return <div ref={ref}>Content</div>
}

Motion is more concise for simple animations. GSAP provides more control for complex ones.

Staggered list animation

Motion:

<motion.ul initial="hidden" animate="visible" variants={{
  visible: { transition: { staggerChildren: 0.1 } }
}}>
  {items.map(item => (
    <motion.li key={item} variants={{
      hidden: { opacity: 0, x: -20 },
      visible: { opacity: 1, x: 0 }
    }}>
      {item}
    </motion.li>
  ))}
</motion.ul>

GSAP:

useGSAP(() => {
  gsap.from(".list-item", {
    opacity: 0, x: -20, duration: 0.5, stagger: 0.1
  })
})

GSAP's stagger is simpler for imperative use. Motion's variant system is more React-idiomatic.

Performance

Both Motion and GSAP are performant when used correctly:

• Use transform and opacity — these are GPU-accelerated
• Avoid animating width, height, top, left — these trigger layout recalculation
• Use will-change sparingly — only for elements currently animating
• GSAP has a slight edge for complex, many-element animations
• Motion has a slight edge for layout animations (FLIP technique built-in)

Pricing

Motion: Free (MIT license). All features included.

GSAP Core: Free for all use cases.

GSAP Premium Plugins: Paid for commercial use.

• ScrollSmoother, MorphSVG, DrawSVG, SplitText, etc.
• Free for personal/non-commercial projects
• Business license from $99/year
• Available free via Shockingly Green membership (active GSAP community members)

FAQ

Should I migrate from Framer Motion to Motion?

Yes, for new features and smaller bundle size. The migration is straightforward — most APIs are identical.

Can I use GSAP with Next.js App Router?

Yes, with the useGSAP hook and "use client" directive on animated components. Works well in practice.

Which has better accessibility?

Both respect prefers-reduced-motion when configured. Motion handles it automatically with the useReducedMotion hook. GSAP requires manual implementation via gsap.matchMedia().

Is GSAP still relevant in 2026?

Absolutely. For complex animation work — scroll narratives, SVG morphing, timeline sequencing — GSAP remains unmatched. Motion is better for React UI animation, but GSAP owns the creative/marketing space.

The Verdict

• Motion for React application UI: micro-interactions, transitions, layout animations, gestures. The default choice for React developers.
• GSAP for creative work: marketing sites, scroll-driven experiences, SVG animation, and anything where animation quality is the product.
• Both together when your app has both UI interactions and creative animations.

Most React developers should start with Motion and add GSAP only when they need its specific capabilities (ScrollTrigger, timelines, SVG morphing).