framer motionvsgsap

what you're actually comparing

Framer Motion (now rebranded as Motion) is a React animation library that provides declarative animation primitives. You describe what an element should look like in different states, and the library handles the interpolation. The animate, initial, exit, whileHover, whileTap props cover most common animation needs in a component model.

GSAP (GreenSock Animation Platform) is a JavaScript animation library that predates React and works anywhere. It's imperative — you write animation timelines that play, pause, reverse, and seek. Its ecosystem of plugins (ScrollTrigger, SplitText, Draggable, Flip) makes it the choice for complex interactive and scroll-driven animation work.

The audiences for these tools largely don't overlap: React component developers vs landing page animators.

where framer motion wins

Declarative React integration. Framer Motion's API fits naturally into React's component model. You define animation states on components, use variants to coordinate parent-child animations, and the library handles enter/exit transitions as components mount and unmount.

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0 }}
  whileHover={{ scale: 1.02 }}
/>

This is readable, composable, and doesn't require thinking about timelines or refs.

Gestures. Framer Motion has excellent drag, pan, and gesture support built in. Draggable items with inertia, constraints, and callbacks are a few props away.

Layout animations. The layout prop is Framer Motion's magic feature — add it to a component and Framer Motion automatically animates it when its position or size changes in the DOM. GSAP's Flip plugin does something similar but requires more setup.

Simpler mental model for React developers. If you already think in React state and props, Framer Motion's animation model extends that thinking. GSAP's imperative timeline model requires a different mental context.

where gsap wins

ScrollTrigger. This is GSAP's best feature and has no meaningful Framer Motion equivalent. ScrollTrigger lets you pin elements while scrolling, create progress-based animations, and synchronize multiple animations to scroll position. The scroll-driven landing pages and portfolio sites that look impressive almost always use ScrollTrigger.

Complex timelines. GSAP timelines let you sequence animations precisely — add a label, insert animations at specific time offsets, stagger elements, reverse to a point. For choreographed multi-step animations (think a feature walkthrough with 12 steps), GSAP's timeline API is significantly more powerful.

Framework agnostic. GSAP works in Vanilla JS, Vue, Svelte, Angular — anywhere JavaScript runs. If you're not in React (or not in a component framework at all), Framer Motion isn't an option.

Performance tuning. GSAP exposes force3D, lazy, overwrite settings that let you optimize animation performance for specific scenarios. In complex animations with dozens of elements, GSAP gives you more control over exactly what's happening.

Ecosystem and history. GSAP has been around since 2008. The number of tutorials, CodePen examples, and community knowledge is enormous. Any animation technique you want to implement has likely been done and shared.

things to know

Motion (Framer Motion) now has a Vanilla JS target. The rebranding to 'motion' included a framework-agnostic API. This narrows GSAP's "framework agnostic" advantage somewhat for lighter use cases.

GSAP in React requires useLayoutEffect. The correct pattern for GSAP in React is useGSAP hook (from @gsap/react) with animations inside, and targets via refs. Forgetting this causes animation/render timing bugs. Framer Motion doesn't have this footgun.

Framer Motion bundle size. The full Framer Motion / Motion library is around 30-50KB depending on what you import. For performance-sensitive applications, tree-shaking carefully. GSAP is similar in size.

Framer (the design tool) vs Framer Motion (the library). Common confusion: Framer is a design/no-code tool. Framer Motion (now Motion) is a React animation library. They share a company but are different products.