GSAP vs Framer Motion: When to Use Which for Production Websites
I use both GSAP and Framer Motion in production every week. Not because I can't choose — but because they solve fundamentally different problems. Picking the wrong one for your project means either fighting the tool or shipping a slower experience than you could have.
Here's the honest take after shipping 12+ production projects with both libraries.
The Short Answer
Use GSAP for scroll-driven animations, complex timelines, SVG morphing, and canvas integrations. Use Framer Motion for component-level enter/exit animations, layout transitions, gesture-based interactions, and anything deeply integrated with React's component lifecycle.
GSAP is a full animation engine. Framer Motion is a React animation library. They overlap in some areas but excel in different ones. Understanding where each shines is the difference between a smooth, performant site and a janky one.
Bundle Size Reality Check
This is where most advice gets it wrong. People say Framer Motion is "heavy" and GSAP is "lightweight." The reality is more nuanced.
GSAP core is about 14KB gzipped. But you rarely use just the core — you add ScrollTrigger (another 8KB), ScrollToPlugin, and sometimes SplitText or CustomEase. A full GSAP setup lands around 25-35KB gzipped. Framer Motion is around 30-40KB gzipped for the full library. The difference is smaller than most developers assume.
The real bundle impact comes from HOW you import. With GSAP, you typically import globally. With Framer Motion, tree-shaking works well if you import specific components (motion.div instead of importing everything). In practice, both end up at similar weights for equivalent functionality.
When GSAP Wins
ScrollTrigger is GSAP's killer feature. If your site has parallax sections, progress-driven animations, or timeline-based scroll sequences, GSAP is the right choice. Framer Motion's useScroll and useInView are good, but they don't match ScrollTrigger's control over scrub direction, pinning, and timeline integration.
GSAP also wins for complex timelines. Need to sequence 20 animation steps with overlapping, staggered, and nested timings? GSAP's timeline API is purpose-built for this. Framer Motion sequences work for simple chains but get unwieldy beyond 5-6 steps.
SVG animation is another GSAP stronghold. Morphing, drawing, and path animations that would require custom React code in Framer Motion are a few lines in GSAP. For hero sections with animated illustrations, GSAP is significantly faster to implement.
When Framer Motion Wins
For component-level animations — modals opening, menus sliding, lists reordering — Framer Motion is the clear winner. Its AnimatePresence component handles mount/unmount animations that are genuinely painful to implement in GSAP.
Layout animations (AnimateSharedLayout / layout prop) let you animate between positions when items reorder, which is extremely difficult in GSAP without manual measurement and DOM manipulation.
Gesture-based interactions (drag, hover, tap, whileInView) integrate naturally with Framer Motion because they're declarative props on motion components. In GSAP, you'd need to add event listeners and manually trigger tweens — more code, more edge cases.
Our Stack at Meteoric
We use both. GSAP powers the landing page hero, scroll-triggered section reveals, and timeline-based animations. Framer Motion handles our modal transitions, card hover effects, testimonial carousel, and layout animations. Lenis provides smooth scrolling on top of both.
The key insight: these libraries aren't competitors for the same job. They're complementary tools for different animation layers. GSAP is the engine for scroll-driven and timeline-based animation. Framer Motion is the React-native layer for component interactions. Using both intentionally gives you the best of both worlds. See these animations in action on our portfolio site and read our tech stack guide for the full picture of our frontend decisions.
