Motion vs. GSAP: Brauchen Sie beide?

Die meisten React-Projekte sollten mit Motion für komponentenbasierte und zustandsgesteuerte Animationen beginnen und GSAP nur dann hinzufügen, wenn ein konkreter Bedarf entsteht – etwa für eine scrubbare Scroll-Timeline, komplexe Sequenzierung oder SVG-/Canvas-Arbeit.

Wer schon einmal versucht hat, einen gepinnten, scrubbaren Scroll-Abschnitt in eine React-App zu integrieren, kennt den Moment, in dem diese Frage auftaucht: Die Animation funktioniert, ein Re-Render löscht sie aus, und man fragt sich, ob man die falsche Bibliothek gewählt hat. Beide gleichzeitig zu verwenden ist verbreitet, vollständig unterstützt und für inhaltslastige Websites oft die richtige Entscheidung – allerdings kostet es eine zweite Laufzeitumgebung und ein zweites mentales Modell, weshalb es keine Standardlösung ist. Dieser Artikel vergleicht beide Bibliotheken anhand der Kriterien, die die Entscheidung tatsächlich bestimmen.

Zwei Fakten entwerten die meisten älteren Vergleiche. Motion (ehemals Framer Motion) ist jetzt für React, JavaScript und Vue verfügbar, und der Import erfolgt aus motion/react statt aus framer-motion. Es ist nicht mehr ausschließlich auf React beschränkt. Und GSAP ist nicht mehr kostenpflichtig: Dank Webflow ist das gesamte GSAP-Toolset jetzt kostenlos, einschließlich aller Bonus-Plugins wie SplitText und MorphSVG, die zuvor exklusiv für Club-GSAP-Mitglieder verfügbar waren – auch für kommerzielle Nutzung.

Wie unterscheiden sich Motion und GSAP?

Die Unterschiede im mentalen Modell sind der entscheidende Faktor. Motion ist deklarativ (Sie beschreiben den Endzustand, und die Bibliothek interpoliert), während GSAP imperativ und timeline-gesteuert ist – Sie steuern jeden Schritt mit präziser Kontrolle über Timing und Easing.

In Motion legen Sie Zielwerte als Props fest, und die Bibliothek ermittelt den Übergang selbst:

import { motion } from "motion/react";

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
/>

Wenn sich die Werte in animate ändern, wechselt Motion automatisch zwischen ihnen; physikalische Eigenschaften wie x und scale verwenden standardmäßig Spring-Physik, während visuelle Eigenschaften wie opacity Tween-Easing nutzen. GSAP kehrt dieses Prinzip um: Sie schreiben imperative Aufrufe und verketten sie auf einer Timeline für gestaffelte, sequenzierte Steuerung. Dieser Unterschied – das Ergebnis beschreiben vs. jeden Schritt choreografieren – zeigt besser als jeder Benchmark, welches Werkzeug für ein gegebenes Problem geeigneter ist.

Motion vs. GSAP im Vergleich anhand relevanter Kriterien

Hier der direkte Vergleich nach den Gesichtspunkten, die ein Frontend-Entwickler bei der Auswahl einer Animationsbibliothek abwägt: mentales Modell, Integration, Scroll-/Timeline-Arbeit, Performance, Bundle-Größe, Framework-Unterstützung und Lizenzierung.

Bei der Integration ist Motion für komponentenbasierte Apps konzipiert: Es animiert zwischen beliebigen zwei Layouts mit einer einzigen layout-Prop, und AnimatePresence hält Elemente am Leben, damit sie beim Verlassen des DOM animiert werden können. GSAP verdient seinen Platz durch Timelines und ScrollTrigger, den etablierten Standard für scroll-gesteuerte Animationen.

Bei der Performance zielen beide auf 60fps im typischen Einsatz ab, und das Marketing keines der Anbieter liefert eine abschließende Antwort. Motions Hybrid-Engine führt Animationen nativ im Browser über die Web Animations API und ScrollTimeline aus und greift auf JavaScript zurück, wenn Spring-Physik oder Gestenerkennung benötigt wird. Motions Homepage behauptet, seine APIs seien „bis zu 90 % kleiner als ihre GSAP-Entsprechungen” – das ist jedoch eine Eigenangabe des Anbieters, keine neutrale Messung. Betrachten Sie es als Marketing. Entscheidend ist das Verhalten auf echten Geräten. Session-Replays von Produktionsseiten erfassen die Fehlerklassen, die Benchmarks übersehen: Dropped Frames bei scroll-verknüpften Animationen oder Layout-Verschiebungen durch Eingangsübergänge auf Mittelklasse-Smartphones.

Bei der Bundle-Größe sind beide modular aufgebaut. Motion ist tree-shakable mit geringem Speicherbedarf, und GSAPs Core ist schlank, mit Plugins, die nach Bedarf hinzugefügt werden. Bei der Lizenzierung ist Motion MIT-lizenziert, und GSAP wird nun unter einer kostenlosen Standardlizenz bereitgestellt.

Wann sollten Sie Motion vs. GSAP verwenden?

Greifen Sie zu Motion für zustandsgesteuerte Benutzeroberflächen: Ein-/Ausgangsübergänge mit AnimatePresence, automatische Layout-Animationen, Gesten und Seitenübergänge innerhalb eines Komponentenbaums. Es passt sich nahtlos an Reacts Render-Zyklus an, sodass Animationen auf Zustände und Props reagieren, ohne manuelles Verdrahten.

Greifen Sie zu GSAP für scrubbare, sequenzierte Setpieces: scroll-verknüpftes Storytelling mit ScrollTrigger, gestaffelte Timelines sowie SVG- oder Canvas-Animationen, auf die Motion nicht ausgerichtet ist. GSAP animiert CSS, SVG, Canvas, React, Vue, WebGL, Farben, Strings und Motion-Pfade – die Bandbreite, auf die Marketing-Websites und Datenvisualisierungen angewiesen sind. Beide Bibliotheken können prefers-reduced-motion berücksichtigen, sodass Barrierefreiheit kein Entscheidungskriterium ist; behandeln Sie sie als gemeinsame Verantwortung.

Brauchen Sie beide?

Ja: Es ist verbreitet und vollständig unterstützt, beide gleichzeitig zu verwenden – Motion für komponentenbasierte Micro-Interactions und GSAP für Scroll- und Timeline-Setpieces. Die Kombination ist ein erstklassiger Ansatz in React. useGSAP() aus dem @gsap/react-Paket ist ein direkter Ersatz für useEffect()/useLayoutEffect(), der das Cleanup automatisch übernimmt und die isomorphe Layout-Effect-Technik verwendet, sodass es in Server-Side-Rendering-Umgebungen sicher ist – einschließlich des Next.js App Routers – vorausgesetzt, die Komponente ist eine Client-Komponente:

"use client";
import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

function Hero() {
  const container = useRef(null);
  useGSAP(() => {
    gsap.from(".title", { y: 40, opacity: 0, duration: 0.6 });
  }, { scope: container });

  return (
    <section ref={container}>
      <h1 className="title">Hello</h1>
    </section>
  );
}

Die Kosten für „beide” sind real: Zwei Animations-Laufzeitumgebungen bedeuten additives Bundle-Gewicht und zwei mentale Modelle im Team. Fügen Sie die zweite Bibliothek nur dann hinzu, wenn ein konkreter Bedarf entsteht, nicht standardmäßig. In der Praxis bedeutet das: Motion übernimmt Ihre Buttons, Modals und Layout-Übergänge, während GSAP den einen Scroll-Narrative-Abschnitt abdeckt, gegen den Motion sich sperren würde.

Das Fazit

Standardempfehlung für eine React-App: Beginnen Sie mit Motion allein, und führen Sie GSAP ein, sobald Sie das erste Mal auf eine scrubbare Scroll-Timeline, komplexe Sequenzierung oder SVG-/Canvas-Arbeit stoßen. Wenn ein Projekt jedoch überwiegend scroll-gesteuertes Storytelling umfasst, beginnen Sie stattdessen mit GSAP und greifen Sie nur dann zu Motion, wenn komponentenbasierte Zustandsanimationen zunehmen. Beide sind aktuell, kostenlos und framework-fähig, sodass die Entscheidung von der Eignung abhängt, nicht von der Lizenzierung. Wählen Sie die Bibliothek, auf die Ihr dominantes Animationsmuster hinweist, fixieren Sie die Versionen (Motion v12.42.2, GSAP v3.15.0), und fügen Sie die zweite nur hinzu, wenn ein echter Bedarf Sie dazu zwingt.

Häufig gestellte Fragen

Ist Framer Motion tot, und was ist damit passiert?

Framer Motion ist nicht tot; es wurde 2024 in Motion umbenannt und wurde zu einem eigenständigen Projekt, das über React hinaus auch JavaScript und Vue unterstützt. Sie installieren jetzt das 'motion'-Paket und importieren aus 'motion/react' statt aus 'framer-motion'. Es bleibt MIT-lizenziert und wird auf der v12-Linie aktiv gepflegt. Ältere Tutorials, die 'framer-motion'-Importe verwenden, funktionieren weiterhin über einen Kompatibilitätspfad, aber neue Projekte sollten den aktuellen Paketnamen verwenden.

Ist GSAP noch kostenpflichtig, oder benötige ich eine Club-GreenSock-Lizenz?

GSAP ist jetzt vollständig kostenlos, einschließlich aller zuvor kostenpflichtigen Plugins wie SplitText, MorphSVG, DrawSVG, ScrollTrigger und ScrollSmoother. Nachdem Webflow GreenSock 2024 übernommen hat, wurde die Zahlungsschranke am 30. April 2025 aufgehoben, und die Standardlizenz wurde auf kommerzielle Nutzung ausgeweitet. Die Bibliothek ist für jeden kostenlos, unabhängig davon, ob Sie Webflow verwenden oder nicht – eine Club-GreenSock-Mitgliedschaft ist für keine Funktion erforderlich.

Kann ich Motion und GSAP zusammen in einem Next.js App Router-Projekt verwenden?

Ja. Verwenden Sie GSAPs offiziellen useGSAP()-Hook aus dem '@gsap/react'-Paket, der Cleanup und den React Strict Mode handhabt, und markieren Sie die Komponente mit der 'use client'-Direktive, da App-Router-Komponenten standardmäßig Server-Komponenten sind. useGSAP() verwendet die isomorphe Layout-Effect-Technik und ist daher SSR-sicher, solange es in einer Client-Komponente ausgeführt wird. Motion-Komponenten funktionieren im selben Baum für Zustands- und Layout-Animationen ohne Konflikte.

Unterstützt Motion scroll-getriggerte Animationen, oder benötige ich weiterhin GSAPs ScrollTrigger?

Motion unterstützt scroll-verknüpfte Animationen über seinen useScroll-Hook und die native ScrollTimeline, was gängige Effekte wie Fortschrittsbalken und Parallax abdeckt, die an die Scroll-Position gebunden sind. Für scrubbare, präzise sequenzierte Scroll-Narrative mit Pinning, Snapping und komplexen Timelines bietet GSAPs ScrollTrigger mehr Kontrolle und ist der etablierte Standard. Wenn Ihre Scroll-Arbeit eine einfache Verknüpfung zwischen Scroll-Fortschritt und einem Wert ist, reicht Motion aus; greifen Sie zu ScrollTrigger, wenn die Choreografie komplex wird.