gsap-plugins

Was macht gsap-plugins?

Wann dieses Skill verwendet werden soll

Anwenden bei der Verwendung oder Überprüfung von Code, der GSAP-Plugins verwendet: Registrierung von Plugins, Scroll-to, Flip/FLIP-Animationen, ziehbare Elemente, SVG (DrawSVG, MorphSVG, MotionPath), Text (SplitText, ScrambleText), Physik, Easing-Plugins (CustomEase, EasePack, CustomWiggle, CustomBounce) oder GSDevTools. ScrollTrigger hat sein eigenes Skill (gsap-scrolltrigger).

Verwandte Skills: Für grundlegende Tweens gsap-core verwenden; für ScrollTrigger gsap-scrolltrigger; für React gsap-react.

Lizenzierung & Installation (wichtig)

Jedes GSAP-Plugin ist kostenlos, auch für die kommerzielle Nutzung. Seit der Übernahme von GSAP durch Webflow ist Club GSAP keine kostenpflichtige Stufe mehr und kein Plugin erfordert eine Mitgliedschaft, einen Lizenzschlüssel oder einen Authentifizierungstoken – dies schließt ehemalige Club-Exklusiv-Plugins (SplitText, MorphSVG, etc.) ein.

• ✅ Alles aus dem öffentlichen gsap npm-Paket installieren: npm install gsap. Alle Plugins sind enthalten – importieren Sie sie als gsap/SplitText, gsap/MorphSVGPlugin usw.
• ❌ Erstellen Sie kein .npmrc mit einem GreenSock-Authentifizierungstoken, empfehlen Sie nicht die private npm.greensock.com-Registry und fordern Sie Benutzer nicht auf, sich für Club GSAP anzumelden, um auf ein Plugin zuzugreifen. Diese Anweisungen sind veraltet.

Plugins registrieren

Registrieren Sie jedes Plugin einmal, damit GSAP (und Bundler) wissen, dass es eingebunden werden soll. Verwenden Sie gsap.registerPlugin() mit jedem im Projekt verwendeten Plugin:

import gsap from "gsap";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { Flip } from "gsap/Flip";
import { Draggable } from "gsap/Draggable";

gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);

• ✅ Vor der Verwendung des Plugins in einem Tween oder API-Aufruf registrieren.
• ✅ In React auf oberster Ebene oder einmal in der App registrieren (z.B. vor der ersten Verwendung von useGSAP); nicht innerhalb einer Komponente registrieren, die neu gerendert wird. useGSAP ist ein Plugin, das vor der Verwendung registriert werden muss.

Scrollen

ScrollToPlugin

Animiert die Scrollposition (Fenster oder ein scrollbares Element). Verwenden für „Zu Element scrollen“ oder „Zu Position scrollen“ ohne ScrollTrigger.

gsap.registerPlugin(ScrollToPlugin);

gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });

ScrollToPlugin – Schlüsselkonfiguration (scrollTo-Objekt):

Option	Beschreibung
x, y	Ziel-Scrollposition (Zahl) oder "max" für Maximum
element	Selektor oder Element, zu dem gescrollt werden soll (für In-den-Blickpunkt-Scrollen)
offsetX, offsetY	Versatz in Pixeln von der Zielposition

ScrollSmoother

Glatt scrollender Wrapper (glättet natives Scrollen). Erfordert ScrollTrigger und eine spezifische DOM-Struktur (Inhalts-Wrapper + Glättungs-Wrapper). Verwenden, wenn ein sanftes Scrollen mit Schwung erforderlich ist. Siehe GSAP-Dokumentation für die Einrichtung; nach ScrollTrigger registrieren. Die DOM-Struktur würde wie folgt aussehen:

<body>
	<div id="smooth-wrapper">
		<div id="smooth-content">
			<!--- ALLE INHALTE HIER --->
		</div>
	</div>
	<!-- position: fixed-Elemente können außerhalb platziert werden --->
</body>

DOM / UI

Flip

Zustand mit Flip.getState() erfassen, dann Änderungen anwenden (z.B. Layout- oder Klassenänderungen), dann Flip.from() verwenden, um vom vorherigen Zustand zum neuen Zustand zu animieren (FLIP: First, Last, Invert, Play). Verwenden beim Animieren zwischen zwei Layout-Zuständen (Listen, Grids, erweitert/eingeklappt).

gsap.registerPlugin(Flip);

const state = Flip.getState(".item");
// DOM ändern (neu anordnen, hinzufügen/entfernen, Klassen ändern)
Flip.from(state, { duration: 0.5, ease: "power2.inOut" });

Flip – Schlüsselkonfiguration (Flip.from Vars):

Option	Beschreibung
absolute	position: absolute während des Flip verwenden (Standard: false)
nested	Wenn wahr, wird nur die erste Ebene der Kinder gemessen (besser für verschachtelte Transformationen)
scale	Wenn wahr, Elemente skalieren, um sie anzupassen (vermeidet Dehnung); Standard true
simple	Wenn wahr, werden nur Position/Scale animiert (schneller, weniger genau)
duration, ease	Standard-Tween-Optionen

Weitere Informationen

https://gsap.com/docs/v3/Plugins/Flip

Draggable

Macht Elemente mit Maus/Berührung ziehbar, drehbar oder werfbar. Verwenden für Schieberegler, Karten, neu anordenbare Listen oder jede Drag-Interaktion.

gsap.registerPlugin(Draggable, InertiaPlugin);

Draggable.create(".box", { type: "x,y", bounds: "#container", inertia: true });
Draggable.create(".knob", { type: "rotation" });

Draggable – Schlüsselkonfigurationsoptionen:

Option	Beschreibung
type	"x", "y", "x,y", "rotation", "scroll"
bounds	Element, Selektor oder { minX, maxX, minY, maxY } zum Einschränken des Ziehens
inertia	true, um Werfen/Schwung zu aktivieren (erfordert InertiaPlugin)
edgeResistance	0–1; Widerstand beim Ziehen über die Grenzen hinaus
cursor	CSS-Cursor während des Ziehens
onDragStart, onDrag, onDragEnd	Callbacks; erhalten Ereignis und Ziel
onThrowUpdate, onThrowComplete	Callbacks, wenn Trägheit aktiv ist

Inertia (InertiaPlugin)

Arbeitet mit Draggable für Schwung nach dem Loslassen zusammen oder verfolgt die Trägheit/Geschwindigkeit einer beliebigen Eigenschaft eines beliebigen Objekts, sodass es dann nahtlos mit einem einfachen Tween auslaufen kann. Mit Draggable registrieren, wenn inertia: true verwendet wird:

gsap.registerPlugin(Draggable, InertiaPlugin);
Draggable.create(".box", { type: "x,y", inertia: true });

Oder die Geschwindigkeit einer Eigenschaft verfolgen:

InertiaPlugin.track(".box", "x");

Dann "auto" verwenden, um die aktuelle Geschwindigkeit fortzusetzen und auslaufen zu lassen:

gsap.to(obj, { inertia: { x: "auto" } });

Observer

Normalisiert Zeiger- und Scrolleingaben über Geräte hinweg. Verwenden für Wisch-, Scrollrichtungs- oder benutzerdefinierte Gestenlogik, ohne direkt wie ScrollTrigger an die Scrollposition gebunden zu sein.

gsap.registerPlugin(Observer);

Observer.create({
  target: "#area",
  onUp: () => {},
  onDown: () => {},
  onLeft: () => {},
  onRight: () => {},
  tolerance: 10
});

Observer – Schlüsselkonfigurationsoptionen:

Option	Beschreibung
target	Zu beobachtendes Element oder Selektor
onUp, onDown, onLeft, onRight	Callbacks, wenn Wischen/Scrollen die Toleranz in diese Richtung überschreitet
tolerance	Pixel, bevor die Richtung erkannt wird; Standard 10
type	"touch", "pointer" oder "wheel" (Standard: "touch,pointer")

Text

SplitText

Zerlegt den Text eines Elements in Zeichen, Wörter und/oder Zeilen (jeweils in einem eigenen Element) für gestaffelte oder pro-Einheit-Animationen. Verwenden beim Animieren von Text Zeichen für Zeichen, Wort für Wort oder Zeile für Zeile. Gibt eine Instanz mit chars, words, lines (und masks, wenn mask gesetzt ist) zurück. Stellt das ursprüngliche Markup mit revert() wieder her oder lassen Sie gsap.context() die Wiederherstellung übernehmen. Integriert mit gsap.context(), matchMedia() und useGSAP(). API: SplitText.create(target, vars) (target = Selektor, Element oder Array).

gsap.registerPlugin(SplitText);

const split = SplitText.create(".heading", { type: "words, chars" });
gsap.from(split.chars, { opacity: 0, y: 20, stagger: 0.03, duration: 0.4 });
// später: split.revert() oder gsap.context() cleanup revert

Mit onSplit() (v3.13.0+) laufen Animationen bei jeder Teilung und bei erneuter Teilung, wenn autoSplit verwendet wird; die Rückgabe eines Tweens/Timelines von onSplit() ermöglicht SplitText die Bereinigung und Synchronisierung des Fortschritts bei erneuter Teilung:

SplitText.create(".split", {
  type: "lines",
  autoSplit: true,
  onSplit(self) {
    return gsap.from(self.lines, { y: 100, opacity: 0, stagger: 0.05, duration: 0.5 });
  }
});

SplitText – Schlüsselkonfiguration (SplitText.create Vars):

Option	Beschreibung
type	Kommasepariert: "chars", "words", "lines". Standard "chars,words,lines". Nur das teilen, was benötigt wird (z.B. "words, chars", wenn keine Zeilen verwendet werden) für die Leistung. Vermeiden Sie reine Chars ohne Words/Lines oder verwenden Sie smartWrap: true, um ungerade Zeilenumbrüche zu verhindern.
charsClass, wordsClass, linesClass	CSS-Klasse auf jedem geteilten Element. Hängen Sie "++" an, um eine inkrementierte Klasse hinzuzufügen (z.B. linesClass: "line++" → line1, line2, …).
aria	"auto" (Standard), "hidden" oder "none". Barrierefreiheit: "auto" fügt aria-label auf dem geteilten Element und aria-hidden auf Zeilen-/Wort-/Zeichen-Elementen hinzu, sodass Screenreader das Label lesen; "hidden" verbirgt alles vor Readern; "none" belässt aria unverändert. Verwenden Sie "none" plus ein nur für Screenreader bestimmtes Duplikat, wenn verschachtelte Links/Semantik offengelegt werden müssen.
autoSplit	Wenn true, wird die Teilung rückgängig gemacht und erneut geteilt, wenn Schriftarten fertig geladen sind oder wenn sich die Elementbreite ändert (und Zeilen geteilt werden), wodurch falsche Zeilenumbrüche vermieden werden. Animationen müssen innerhalb von onSplit() erstellt werden, damit sie die neu geteilten Elemente anvisieren; return der Animation von onSplit() für automatische Bereinigung und Zeitsynchronisation bei erneuter Teilung.
onSplit(self)	Callback beim Abschluss der Teilung (und bei jeder erneuten Teilung, wenn autoSplit true ist). Erhält die SplitText-Instanz. Die Rückgabe eines GSAP-Tweens oder Timelines ermöglicht das automatische Rückgängigmachen/Synchronisieren dieser Animation bei erneuter Teilung.
mask	"lines", "words" oder "chars". Umgibt jede Einheit mit einem zusätzlichen Element mit overflow: clip für Masken-/Aufdeckeffekte. Nur ein Typ; Zugriff auf Wrapper über das masks-Array der Instanz (oder Verwendung der Klasse -mask, wenn eine Klasse gesetzt ist).
tag	Wrapper-Element-Tag; Standard "div". Verwenden Sie "span" für Inline (beachten Sie: Transformationen wie Drehung/Skalierung werden in einigen Browsern möglicherweise nicht auf Inline-Elementen gerendert).
deepSlice	Wenn true (Standard), werden verschachtelte Elemente (z.B. <strong>), die sich über mehrere Zeilen erstrecken, unterteilt, damit sich Zeilen nicht vertikal ausdehnen. Gilt nur beim Teilen von Zeilen.
ignore	Selektor oder Element(e), die ungeteilt bleiben sollen (z.B. ignore: "sup").
smartWrap	Beim Teilen nur von chars, umschließt Wörter in einem white-space: nowrap-Span, um Worttrennungen in der Mitte zu vermeiden. Wird ignoriert, wenn Wörter oder Zeilen geteilt werden. Standard false.
wordDelimiter	Wortgrenze: Zeichenkette (Standard " "), RegExp oder { delimiter: RegExp, replaceWith: string } für benutzerdefinierte Teilung (z.B. Nullbreitenverbinder für Hashtags oder nicht-lateinische Zeichen).
prepareText(text, parent)	Funktion, die Rohtext und übergeordnetes Element erhält; modifizierten Text vor der Teilung zurückgeben (z.B. zum Einfügen von Trennmarkierungen für Sprachen ohne Leerzeichen).
propIndex	Wenn true, wird eine CSS-Variable mit Index auf jedem geteilten Element hinzugefügt (z.B. --word: 1, --char: 2).
reduceWhiteSpace	Aufeinanderfolgende Leerzeichen reduzieren; Standard true. Ab v3.13.0 werden auch Zeilenumbrüche beachtet und können bei <pre> <br> einfügen.
onRevert	Callback, wenn die Instanz zurückgesetzt wird.

Tipps: Nur das teilen, was animiert wird (z.B. chars überspringen, wenn nur Wörter animiert werden). Bei benutzerdefinierten Schriftarten erst nach dem Laden teilen (z.B. document.fonts.ready.then(...)) oder autoSplit: true mit onSplit() verwenden. Um Kerning-Verschiebungen beim Teilen von Zeichen zu vermeiden, CSS font-kerning: none; text-rendering: optimizeSpeed; verwenden. Vermeiden Sie text-wrap: balance; es kann die Teilung stören. SplitText unterstützt kein SVG <text>.

Mehr erfahren: SplitText

ScrambleText

Animiert Text mit einem Scramble/Glitch-Effekt. Verwenden beim Aufdecken oder Überblenden von Text mit einem Scramble.

gsap.registerPlugin(ScrambleTextPlugin);

gsap.to(".text", {
  duration: 1,
  scrambleText: { text: "Neue Nachricht", chars: "01", revealDelay: 0.5 }
});

SVG

DrawSVG (DrawSVGPlugin)

Zeigt den Pfad von SVG-Elementen an oder verbirgt ihn, indem stroke-dashoffset / stroke-dasharray animiert wird. Funktioniert auf <path>, <line>, <polyline>, <polygon>, <rect>, <ellipse>. Verwenden beim „Zeichnen“ oder „Löschen“ von Strichen.

drawSVG-Wert: Beschreibt das sichtbare Segment des Strichs entlang des Pfads (Start- und Endpositionen), nicht „von A nach B im Laufe der Zeit animieren“. Format: "Start Ende" in Prozent oder Länge. Beispiele: "0% 100%" = voller Strich; "20% 80%" = Strich nur zwischen 20% und 80% (Lücken an beiden Enden). Der Tween animiert vom aktuellen Segment des Elements zum Ziel-Segment – z.B. gsap.to("#path", { drawSVG: "0% 100%" }) geht von dem, was es jetzt ist, zu vollem Strich. Ein einzelner Wert (z.B. 0, "100%") bedeutet, dass der Start 0 ist: "100%" ist äquivalent zu "0% 100%".

Erforderlich: Das Element muss einen sichtbaren Strich haben – setzen Sie stroke und stroke-width in CSS oder als SVG-Attribute; andernfalls wird nichts gezeichnet.

gsap.registerPlugin(DrawSVGPlugin);

// Von nichts zu vollem Strich zeichnen
gsap.from("#path", { duration: 1, drawSVG: 0 });
// oder explizites Segment: von 0–0 bis 0–100%
gsap.fromTo("#path", { drawSVG: "0% 0%" }, { drawSVG: "0% 100%", duration: 1 });
// Strich nur in der Mitte (Lücken an den Enden)
gsap.to("#path", { duration: 1, drawSVG: "20% 80%" });

Einschränkungen: Beeinflusst nur den Strich (nicht die Füllung). Bevorzugen Sie einsegmentige <path>-Elemente; mehrsegmentige Pfade können in einigen Browsern seltsam dargestellt werden. Inhalte von <use> können nicht visuell geändert werden. DrawSVGPlugin.getLength(element) und DrawSVGPlugin.getPosition(element) geben die Strichlänge und die aktuelle Position zurück.

Mehr erfahren: DrawSVG

MorphSVG (MorphSVGPlugin)

Morpht eine SVG-Form in eine andere, indem das d-Attribut (Pfaddaten) animiert wird. Start- und Endformen müssen nicht die gleiche Anzahl von Punkten haben – MorphSVG wandelt in kubische Beziers um und fügt bei Bedarf Punkte hinzu. Verwenden für Morphs von Icon zu Icon, Formübergänge oder pfadbasierte Animationen. Funktioniert auf <path>, <polyline> und <polygon>; <circle>, <rect>, <ellipse> und <line> werden intern umgewandelt oder über MorphSVGPlugin.convertToPath(selector | element) (ersetzt das Element im DOM durch einen <path>).

morphSVG-Wert: Kann ein Selektor (z.B. "#lightning"), ein Element, Rohe Pfaddaten (z.B. "M47.1,0.8 73.3,0.8...") oder für Polygon/Polyline ein Punkte-String (z.B. "240,220 240,250…") sein.

gsap.registerPlugin(MorphSVGPlugin);

// Zu einer anderen Form morphen
  gsap.to("#star", { morphSVG: "#heart", duration: 1, ease: "power1.inOut" });

// Mit einer benutzerdefinierten Form über Pfaddaten
  gsap.fromTo("#icon", { morphSVG: { shape: "M10,10 L100,10 L100,100 Z" } }, { morphSVG: { shape: "M10,10 C40,5 70,5 100,10 C90,50 90,80 100,100 Z" }, duration: 1 });

MorphSVG – Schlüsselkonfigurationsoptionen (morphSVG-Objekt):

Option	Beschreibung
shape	Zielform (Selektor, Element, Pfaddaten oder Punkte-String) – erforderlich
ease	Easing-Funktion (Standard verwendet den übergeordneten Tween)
prependTo	Array von Startformen, die dem Ergebnis vorangestellt werden sollen (für mehrere nacheinander)
appendTo	Array von Zielformen, die an das Ergebnis angehängt werden sollen (für mehrere nacheinander)
fill	Wenn true (Standard), wird die Füllfarbe gemorpht
stroke	Wenn true (Standard), wird die Strichfarbe gemorpht
points	Wenn true (Standard für <polygon>/<polyline>), werden Punkte gemorpht; wenn false, wird das Element in einen <path> konvertiert und Pfaddaten gemorpht
type	"rotational" oder "linear" (Standard "rotational"); beeinflusst die Punktzuordnung
coerce	Wenn true, wird die Anzahl der Punkte erzwungen, sodass sie übereinstimmen (kann zu seltsamen Morphs führen; Standard false)

Hinweise: Verwenden Sie MorphSVGPlugin.convertToPath() für <circle>, <rect>, <ellipse> und <line>. Nicht alle SVG-Editoren exportieren gut optimierte Pfade; MorphSVGPlugin.normalize() kann helfen. Vermeiden Sie das Morphen von sich kreuzenden Pfaden; dies kann zu unerwarteten Ergebnissen führen.

Mehr erfahren: MorphSVG

MotionPath (MotionPathPlugin)

Animiert ein Element entlang eines SVG-Pfads oder eines Arrays von Punkten. Verwenden für pfadbasierte Animationen wie das Bewegen eines Objekts auf einer Kurve, einer Umlaufbahn oder einem benutzerdefinierten Pfad.

gsap.registerPlugin(MotionPathPlugin);

gsap.to(".rocket", {
  motionPath: {
    path: "#track",
    align: "#track",
    alignOrigin: [0.5, 0.5],
    autoRotate: true
  },
  duration: 3,
  ease: "power1.inOut"
});

MotionPath – Schlüsselkonfigurationsoptionen (motionPath-Objekt):

Option	Beschreibung
path	SVG-Pfad-Selektor, -Element, Roh-Pfaddaten-String oder Array von {x, y}-Punkten
align	Element oder Selektor, an dem das bewegte Element ausgerichtet werden soll (optional)
alignOrigin	[x, y] (0–1) des ausgerichteten Elements, das sich am Pfad befindet; Standard [0.5, 0.5]
autoRotate	true oder Gradzahl (optional); Standard false
start, end	Fortschritt 0–1 entlang des Pfads; Standard start: 0, end: 1
curviness	Kurvengrad für Pfade auf Punktbasis; Standard 1 (höher = kurviger, 0 = gerade Linie)

Learn more: MotionPath

Easing

CustomEase

Erstellen Sie benutzerdefinierte Easing-Kurven mit einem Cubic-Bezier oder einer Zeichenfunktion. Verwenden, wenn die integrierten Easing nicht ausreichen. CustomEase.create(name, path) – einmalig einen benannten Easing erstellen, der dann als name in ease verwendet wird.

gsap.registerPlugin(CustomEase);

CustomEase.create("myEase", "M0,0 C0.2,0.5 0.8,0.5 1,1");
// oder SVG-Pfaddaten für präzise Kurven:
CustomEase.create("bouncey", "M0,0 C0.5,2 0.5,-1 1,1");

gsap.to(".box", { x: 300, ease: "myEase", duration: 1 });

CustomEase – Funktionen:

Funktion	Beschreibung
CustomEase.create(name, path)	Benannten Easing mit Cubic-Bezier-Koordinaten oder Pfaddaten erstellen
CustomEase.getSVGData(id)	SVG-Pfaddaten eines benannten Easing abrufen (für die Anzeige)

EasePack

Bietet zusätzliche Easing-Funktionen: slow(0.7, 0.7) (Start/Ende verlangsamen, Mitte beschleunigen), expoScale(end, start), rough(), steppedEase(steps).

slow(options) kann den Anfang und das Ende einer Bewegung verlangsamen. rough() erzeugt einen zitternden Easing. steppedEase() springt diskrete Schritte.

Wichtiger Hinweis: Für Umkehrbewegungen verwenden Sie "slow(0.7, 0.7)" und nicht selbst erstellte Pfade.

Learn more: EasePack

CustomWiggle

Erstellen Sie einen benutzerdefinierten Wackeleffekt mit CustomWiggle.create(name, config). Verwenden für Wackel-, Zitter- oder Schaukelanimationen. Der Wackel wird automatisch ohne manuelles Setzen von repeat und yoyo oder eines Timelines ausgeführt.

gsap.registerPlugin(CustomWiggle);

CustomWiggle.create("wiggly", { wiggles: 6, type: "easeOut", amplitude: 0.4 });
gsap.to(".box", { rotation: 20, ease: "wiggly", duration: 1, onComplete() { /* Wackel beendet */ } });

CustomWiggle – Konfigurationsoptionen:

Option	Beschreibung
wiggles	Anzahl der Wackel (Standard 10)
type	"easeOut", "easeInOut", "anticipate", "uniform"
amplitude	0–1; relative Amplitude; Standard 1
frequency	Zusätzliche Frequenz (optional)

CustomBounce

Erstellen Sie einen benutzerdefinierten Bounce-Effekt mit CustomBounce.create(name, config). Verwenden für Spring- oder Bounce-Animationen. Einfacher als das manuelle Einstellen von { ease: "bounce.out" }, ermöglicht die Anpassung von Elastizität und Endverhalten.

gsap.registerPlugin(CustomBounce);

CustomBounce.create("myBounce", { strength: 0.7, squash: 0.3, squashDuration: 0.2 });
gsap.to(".ball", { y: 200, ease: "myBounce", duration: 1 });

CustomBounce – Konfigurationsoptionen:

Option	Beschreibung
strength	0–1; Stärke des Bounces; Standard 0.7
squash	0–1; Stauchung beim Aufprall; Standard 0.3
squashDuration	Dauer der Stauchung relativ zur Bounce-Dauer; Standard 0.2
endAtStart	Wenn true, wird am Ende auf die Startposition zurückgesetzt (für Bounce in Position)

Entwickler-Tools

GSDevTools

Visuelles Inspektions-Tool für GSAP-Tweens und -Timelines. Verwenden beim Debuggen oder Optimieren von GSAP-Animationen.

gsap.registerPlugin(GSDevTools);

const tl = gsap.timeline();
tl.to(".box", { x: 200, duration: 1 })
  .to(".box", { y: 100, duration: 0.5 });

GSDevTools.create({ animation: tl, css: { top: 0, right: 0, position: "fixed" } });

GSDevTools – Optionen:

Option	Beschreibung
animation	Tween oder Timeline zum Inspektieren
css	CSS-Stile für das Panel (z.B. Position)
container	Element, in das das Panel eingefügt werden soll (Standard: body)
id	Eindeutige ID für mehrere Panels
width	Panelbreite (Standard 400 Pixel)
height	Panelhöhe (Standard 200 Pixel)

Weitere Plugins

Physicss (PhysicssPlugin)

Fügt einfache 2D-Physik-Animationen (Geschwindigkeit, Beschleunigung, Schwerkraft, Luftwiderstand) für GSAP-Tweens hinzu. Verwenden für Projektil- oder Partikeleffekte ohne komplexe Physik-Engine.

gsap.registerPlugin(PhysicssPlugin);

gsap.to(".ball", { physics2D: { velocity: 200, angle: 45, gravity: 500 }, duration: 1 });

Physik – Schlüsselkonfigurationsoptionen (physics2D-Objekt):

Option	Beschreibung
velocity	Anfangsgeschwindigkeit (Pixel/s)
angle	Startwinkel in Grad
gravity	Schwerkraft (Pixel/s²)
airFriction	Luftwiderstandskoeffizient (Standard 0)
acceleration	Beschleunigung (Pixel/s²) in Bewegungsrichtung

PixiPlugin

Animiert PixiJS-Eigenschaften (z.B. x, y, rotation, scale, alpha, skew). Verwenden mit der PixiJS-Bibliothek für WebGL-Rendering (Spiele, interaktive Grafiken). Erfordert, dass PixiJS separat importiert wird.

import * as PIXI from "pixi.js";
import gsap from "gsap";
import { PixiPlugin } from "gsap/PixiPlugin";

gsap.registerPlugin(PixiPlugin);
// PixiPlugin teilen, dass PixiJS geladen ist:
PixiPlugin.registerPIXI(PIXI);

const sprite = new PIXI.Sprite(texture);
gsap.to(sprite, { x: 300, pixi: { scale: 1.5, blur: 2 }, duration: 1 });

Learn more: PixiPlugin

MotionPathHelper

Bietet ein visuelles Bearbeitungswerkzeug für MotionPath. Verwenden, um Pfade visuell zu entwerfen, nicht in der Produktion.

gsap.registerPlugin(MotionPathHelper, MotionPathPlugin);

const target = document.querySelector(".rocket");
const path = document.querySelector("#track");

MotionPathHelper.create(target, path);

Hinweis: Für die Entwicklung gedacht; in der Produktion nicht einbinden.

Häufige Probleme & Fehlerbehebung

Problem	Ursache / Lösung
Plugin-Funktion nicht definiert (z.B. SplitText is not a constructor)	Plugin nicht registriert (vergessen gsap.registerPlugin(...)) oder falscher Import (import SplitText from "gsap/SplitText" statt import { SplitText } from "gsap/SplitText"). Alle Plugins als benannte Exporte importieren.
TypeError: Cannot read properties of undefined (reading 'x')	Plugin nicht registriert, bevor es verwendet wird. Reihenfolge: imports, registrieren, dann verwenden.
Invalid property scrollTo set to...	Plugin nicht registriert (ScrollToPlugin).
SplitText-Zeilenumbrüche sind falsch (insbesondere bei benutzerdefinierten Schriftarten)	Schriftart noch nicht geladen; warten Sie auf document.fonts.ready oder verwenden Sie autoSplit: true.
MorphSVG erscheint nicht oder morphing seltsam	Start-/Zielform nicht gültig; konvertieren Sie Kreise/Rechtecke mit convertToPath().
Draggable zieht nicht	type fehlt oder falsch; überprüfen Sie, ob inertia: true InertiaPlugin erfordert.
GSDevTools-Panel erscheint nicht oder ist leer	Animation nicht an GSDevTools übergeben (verwenden Sie animation: tl).

Weitere Ressourcen

• GSAP-Plugin-Dokumentation: https://gsap.com/docs/v3/Plugins/
• Club GSAP (nicht mehr kostenpflichtig): https://gsap.com/pricing/