GSAP vs Motion (formerly Framer Motion)

Pick GSAP when motion is part of the product's identity (brand sites, award-winning portfolios, scroll-driven editorial). Pick Motion when you're building a SaaS dashboard, internal tools, or a React app where animation supports UX rather than defines it. Both are excellent at what they're for - it's not a 'winner takes all'.

React idiom

Winner: Motion

Motion is React-first. Its <motion.div> + variants API feels like React. GSAP's useGSAP works well but always reads as 'GSAP inside React' rather than 'React with motion'.

Scroll-driven, scrubbed, pinned animations

Winner: GSAP

ScrollTrigger has 8 years of production iteration. Pinning + scrub + parallax + complex scroll choreography all work reliably. Motion's useScroll is excellent for simpler scroll-linked effects but doesn't approach ScrollTrigger's depth.

Timeline-based choreography

Winner: GSAP

gsap.timeline() with the position parameter is the cleanest way to express 'this happens, then this, with these overlaps'. Motion's stagger + sequence APIs are good for short sequences; for complex multi-element choreography, GSAP wins.

Bundle size

Winner: Motion

Motion's mini-bundle is ~5kb. GSAP core is ~22kb. For UI-only animation in a perf-sensitive app, Motion is the leaner choice. If you'll use ScrollTrigger anyway (~12kb more), the gap narrows.

Cross-framework reuse

Winner: GSAP

GSAP runs in any framework (React, Vue, Svelte, vanilla). Code patterns transfer directly. Motion is React-only (Motion One is the Vanilla version but a different library).

Learning curve

Winner: Motion

Motion is easier to learn if you already know React. GSAP has a much larger surface area (Easing, Timeline, ScrollTrigger, plugins) - more power, but more to learn.

Documentation

Winner: Tie

Both have excellent docs. GSAP's are denser (reference-style); Motion's are friendlier (tutorial-style). Pick by reading style preference.

The difference between GSAP and Motion is best expressed by what each lets you do that the other doesn't.

GSAP's strength is the timeline + ScrollTrigger combination. You can write 30 lines of GSAP that pin a section, scrub a 5-step timeline as the user scrolls, and reset cleanly on resize - and have it feel rock-solid in production. Motion can do simpler scroll-linked effects with useScroll and motion-pinned, but the depth isn't there. If your design comp shows 'this scene pins, then this happens, then this, then unpins' - GSAP.

Motion's strength is React idiom. Writing <motion.div animate={{ x: 100 }} transition={{ duration: 0.5 }}> is just React. Variants compose like props. Stagger works through children automatically. Layout animations (FLIP) are one prop. If your design comp shows 'modal slides in, list items reorder, card flips on hover' - Motion will write less code.

• The site IS the brand. Motion is part of the value proposition.
• You need ScrollTrigger - pinning, scrub, scroll-driven scenes, parallax.
• Multi-step timelines with precise positioning.
• SVG draw effects, MorphSVG, custom eases.
• You may add Vue or vanilla JS surfaces later (same GSAP code transfers).

• React-only project, SaaS or product app.
• Animations support UX rather than define it (transitions, microinteractions, layout shifts).
• Bundle size matters and you won't use ScrollTrigger anyway.
• Your team already knows React patterns and would rather not learn GSAP's surface.

Annnimate is GSAP-only because that's the position it holds: production-grade motion built to the standard studios ship for real brands. Some components shipped on those brand sites, the rest are Good Fella originals held to the same bar, and each one carries its honest origin on the detail page. If you've already chosen GSAP and want a head start on the patterns that actually work in production, browse the library.

If you've chosen Motion, Aceternity UI and Magic UI are the React + Motion equivalents. Both are excellent for what they are.