GSAP vs Framer Motion: Which to Choose in 2026?
A detailed comparison of the two leading animation libraries for React developers, with real code examples, performance benchmarks, and a clear decision framework.
Animation is one of the most visible dimensions of web quality. A page that moves well feels premium. A page with janky, generic transitions feels cheap regardless of how polished the static design is. In the React ecosystem, two libraries dominate: GSAP and Framer Motion. They're both excellent, but they're built for different jobs.
Understanding the Fundamental Difference
GSAP (GreenSock Animation Platform) is an imperative, JavaScript-first animation engine. You write timelines, describe sequences, and trigger animations through JavaScript code. It's been the industry standard for complex web animation for over a decade.
Framer Motion is a declarative, React-first animation library. Animations are described as props on React components. The library integrates with React's render cycle, lifecycle, and state system.
This difference in philosophy, imperative vs. declarative, determines which tool fits which problem.
When GSAP Is the Right Choice
Scroll-Driven Storytelling
GSAP's ScrollTrigger plugin is the best scroll animation tool available, bar none. It handles pinned sections, scrub animations, parallax, and complex multi-step scroll sequences with precision.
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useGSAP } from "@gsap/react";
import { useRef } from "react";
gsap.registerPlugin(ScrollTrigger, useGSAP);
export function FeatureSection() {
const containerRef = useRef<HTMLDivElement>(null);
useGSAP(() => {
const cards = gsap.utils.toArray<HTMLElement>(".feature-card");
cards.forEach((card, i) => {
gsap.from(card, {
scrollTrigger: {
trigger: card,
start: "top 80%",
toggleActions: "play none none reverse",
},
y: 60,
opacity: 0,
duration: 0.8,
delay: i * 0.1,
ease: "power3.out",
});
});
}, { scope: containerRef });
return (
<div ref={containerRef} className="grid grid-cols-3 gap-8">
{features.map((feature) => (
<div key={feature.id} className="feature-card bg-white rounded-2xl p-6">
{feature.title}
</div>
))}
</div>
);
}
Framer Motion's useScroll and useTransform hooks are capable, but they don't match GSAP ScrollTrigger's control over scrub speed, pin behaviour, and multi-timeline coordination.
Complex Sequenced Timelines
When you need to choreograph multiple elements in a precise sequence, think hero animations, product launch sequences, onboarding flows, GSAP timelines are unmatched:
useGSAP(() => {
const tl = gsap.timeline({ delay: 0.3 });
tl.from(".hero-eyebrow", { y: 20, opacity: 0, duration: 0.5 })
.from(".hero-headline", { y: 30, opacity: 0, duration: 0.7 }, "-=0.2")
.from(".hero-subtext", { y: 20, opacity: 0, duration: 0.5 }, "-=0.3")
.from(".hero-cta", { y: 15, opacity: 0, duration: 0.4, stagger: 0.1 }, "-=0.2")
.from(".hero-image", { scale: 1.05, opacity: 0, duration: 1 }, "-=0.5");
}, { scope: heroRef });
This level of timing control, where each element's animation references the previous one's end time with an offset, is significantly harder to express in Framer Motion's declarative model.
SVG and Canvas Animation
GSAP's MorphSVGPlugin and DrawSVGPlugin handle complex SVG animations, path morphing, stroke drawing effects, vector illustrations coming to life, that simply aren't possible with Framer Motion.
For data visualisations, logos, and illustrated UI elements, GSAP is the clear choice.
Performance at Scale
GSAP batches DOM reads and writes using its internal RAF scheduler, avoiding layout thrashing. On animation-heavy pages with 50+ simultaneously animated elements, GSAP consistently outperforms alternatives. It also handles reduced motion preferences (prefers-reduced-motion) through its global configuration.
When Framer Motion Is the Right Choice
UI State Transitions
Framer Motion's motion components handle hover states, click feedback, toggle animations, and tab switches elegantly. The declarative syntax keeps animation logic co-located with component state:
import { motion } from "framer-motion";
import { useState } from "react";
export function Toggle() {
const [isOn, setIsOn] = useState(false);
return (
<button
onClick={() => setIsOn(!isOn)}
className={`relative w-14 h-7 rounded-full transition-colors ${
isOn ? "bg-indigo-600" : "bg-gray-200"
}`}
>
<motion.div
className="absolute top-1 left-1 w-5 h-5 bg-white rounded-full shadow"
animate={{ x: isOn ? 28 : 0 }}
transition={{ type: "spring", stiffness: 500, damping: 30 }}
/>
</button>
);
}
Mount and Unmount Animations
AnimatePresence makes enter/exit animations trivial. Animating components as they mount or unmount from the React tree is genuinely painful in GSAP, you need refs, cleanup, and careful lifecycle management. With Framer Motion:
import { AnimatePresence, motion } from "framer-motion";
export function Notification({ show, message }: { show: boolean; message: string }) {
return (
<AnimatePresence>
{show && (
<motion.div
initial={{ opacity: 0, y: -20, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: -20, scale: 0.95 }}
transition={{ duration: 0.2, ease: "easeOut" }}
className="fixed top-4 right-4 bg-white rounded-xl shadow-lg p-4"
>
{message}
</motion.div>
)}
</AnimatePresence>
);
}
Page and Route Transitions
In Next.js App Router, Framer Motion's AnimatePresence wrapping the page content creates smooth route transitions. GSAP can achieve this but requires more complex setup with usePathname and manual timeline management.
// app/template.tsx, Re-renders on every route change
"use client";
import { motion } from "framer-motion";
export default function Template({ children }: { children: React.ReactNode }) {
return (
<motion.div
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, ease: "easeOut" }}
>
{children}
</motion.div>
);
}
Gesture-Based Interactions
Drag-to-dismiss, swipe-to-delete, pinch-to-zoom, Framer Motion's gesture system handles these with physics-based animations and accessible defaults:
<motion.div
drag="x"
dragConstraints={{ left: -100, right: 0 }}
dragElastic={0.1}
onDragEnd={(_, info) => {
if (info.offset.x < -80) onDismiss();
}}
className="notification-card"
>
{content}
</motion.div>
Performance Considerations
Both libraries are performant when used correctly. The gotchas:
GSAP:
- Use
gsap.utils.toArray()for animating multiple elements, faster than querying the DOM repeatedly - Clean up timelines and ScrollTriggers in the
useGSAPcleanup oruseEffectcleanup function - Avoid animating layout-triggering properties (width, height, top, left), use
transformandopacity
Framer Motion:
- Use
layoutprop sparingly, layout animations are computationally expensive - Be careful with large lists: animating 100+ items with
AnimatePresencecan be slow - Prefer
useTransformanduseSpringover rerenders for scroll-linked animations
Decision Framework
| Scenario | Use GSAP | Use Framer Motion |
|---|---|---|
| Scroll-driven marketing pages | ✓ | |
| Page / route transitions | ✓ | |
| Complex hero sequences | ✓ | |
| Modal, drawer, toast animations | ✓ | |
| SVG / canvas animation | ✓ | |
| UI micro-interactions (hover, click) | ✓ | |
| Drag and gesture interfaces | ✓ | |
| Data visualisation | ✓ |
The Codolve approach: We use both in the same project. GSAP handles scroll-driven sequences and complex marketing page animations. Framer Motion handles UI state transitions in the application layer. They don't conflict, and each does its job better than the other could.
If you want scroll-driven animations and interactive UI built to this standard, Codolve's UI/UX design and development team can help.
Frequently Asked Questions
Can I use GSAP and Framer Motion in the same project?
Yes, absolutely. They operate at different levels, GSAP is imperative and DOM-level, Framer Motion is declarative and React-level. They don't conflict. Many production sites use GSAP for marketing sections and Framer Motion for application UI.
Is Framer Motion free to use?
Framer Motion is MIT licensed and completely free. GSAP's core is also free, but advanced plugins (MorphSVG, SplitText, ScrollSmoother) require a paid Club GSAP license for commercial use.
Does GSAP work well with React Server Components?
GSAP requires the DOM, so it only runs in Client Components (marked with "use client"). Use the useGSAP hook from @gsap/react for proper cleanup and React integration. Server Components can render the static markup; GSAP animates it client-side after hydration.
Which library has better accessibility support?
Both support prefers-reduced-motion. GSAP has a global matchMedia API for it. Framer Motion checks it automatically for most animations. Always test with motion reduced in your OS settings.
How do I choose if I'm just starting out?
Start with Framer Motion. Its declarative API is easier to learn, integrates naturally with React, and covers the vast majority of UI animation needs. Add GSAP when you need scroll-triggered sequences or complex timelines that Framer Motion can't express cleanly.
Tags
