iurymagano/portfolio-next

GSAP-Plugins

Wann dieses Skill angewendet werden soll

Anwenden bei der Verwendung oder Überprüfung von Code, der GSAP-Plugins nutzt: Plugin-Registrierung, 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 ein eigenes Skill (gsap-scrolltrigger).

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

Lizenzierung & Installation (wichtig)

Jedes GSAP-Plugin ist kostenlos, auch für die kommerzielle Nutzung. Seit der Übernahme von GSAP durch Webflow gibt es Club GSAP nicht mehr als kostenpflichtige Stufe und kein Plugin benötigt eine Mitgliedschaft, einen Lizenzschlüssel oder ein Authentifizierungstoken – dies gilt auch für ehemals Club-exklusive Plugins (SplitText, MorphSVG usw.).

• ✅ Alles aus dem öffentlichen gsap-npm-Paket installieren: npm install gsap. Alle Plugins sind enthalten – importieren Sie sie als gsap/SplitText, gsap/MorphSVGPlugin usw.
• ❌ Kein .npmrc mit einem GreenSock-Auth-Token generieren, die private npm.greensock.com-Registry vorschlagen oder Benutzer auffordern, sich für Club GSAP anzumelden, um auf ein Plugin zuzugreifen. Diese Anweisungen sind veraltet.

Plugins registrieren

Jedes Plugin einmal registrieren, damit GSAP (und Bundler) wissen, dass es eingebunden werden soll. gsap.registerPlugin() mit jedem im Projekt verwendeten Plugin verwenden:

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 rendert. 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 – wichtige Konfiguration (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 Scroll-in-Ansicht)
offsetX, offsetY	Versatz in Pixeln von der Zielposition

ScrollSmoother

Sanfter Scroll-Wrapper (glättet natives Scrollen). Erfordert ScrollTrigger und eine bestimmte DOM-Struktur (Content-Wrapper + Smooth-Wrapper). Verwenden, wenn sanftes, momentumartiges Scrollen benötigt wird. Siehe GSAP-Dokumentation für das Setup; nach ScrollTrigger registrieren. Die DOM-Struktur würde wie folgt aussehen:

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

DOM / UI

Flip

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

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 – wichtige Konfiguration (Flip.from vars):

Option	Beschreibung
absolute	position: absolute während des Flip verwenden (Standard: false)
nested	Wenn true, wird nur die erste Ebene der Kinder gemessen (besser bei verschachtelten Transformationen)
scale	Wenn true, Elemente skaliert einpassen (vermeidet Streckung); Standard true
simple	Wenn true, werden nur Position/Skalierung 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 zieh-, dreh- oder werfbar. Verwenden für Schieberegler, Karten, neu anordenbare Listen oder jede Ziehinteraktion.

gsap.registerPlugin(Draggable, InertiaPlugin);

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

Draggable – wichtige Konfigurationsoptionen:

Option	Beschreibung
type	"x", "y", "x,y", "rotation", "scroll"
bounds	Element, Selektor oder { minX, maxX, minY, maxY } zum Begrenzen des Ziehens
inertia	true zum Aktivieren von Wurf/Schwung (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 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 Geschwindigkeit einer Eigenschaft verfolgen:

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

Dann mit "auto" die aktuelle Geschwindigkeit fortsetzen und auslaufen lassen:

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

Observer

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

gsap.registerPlugin(Observer);

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

Observer – wichtige Konfigurationsoptionen:

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

Teilt den Text eines Elements in Zeichen, Wörter und/oder Zeilen auf (jedes 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 lässt gsap.context() es rückgängig machen. 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 – wichtige Konfiguration (SplitText.create vars):

Option	Beschreibung
type	Komma-getrennt: "chars", "words", "lines". Standard "chars,words,lines". Nur das Nötigste teilen (z. B. "words, chars", wenn keine Zeilen verwendet werden) für die Leistung. Vermeiden Sie chars allein ohne words/lines oder verwenden Sie smartWrap: true, um ungerade Zeilenumbrüche zu vermeiden.
charsClass, wordsClass, linesClass	CSS-Klasse auf jedem geteilten Element. "++" anhängen, um eine hochgezählte 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 Bildschirmlesegeräte das Label lesen; "hidden" verbirgt alles vor Lesegeräten; "none" belässt aria unverändert. Verwenden Sie "none" plus ein Nur-Bildschirmlesegerät-Duplikat, wenn verschachtelte Links/Semantiken sichtbar sein müssen.
autoSplit	Wenn true, wird rückgängig gemacht und neu geteilt, wenn Schriftarten geladen sind oder wenn die Elementbreite sich ändert (und Zeilen geteilt werden), um falsche Zeilenumbrüche zu vermeiden. Animationen müssen innerhalb von onSplit() erstellt werden, damit sie die neu geteilten Elemente anvisieren; geben Sie die Animation von onSplit() zurück für automatische Bereinigung und Zeitsynchronisation bei erneuter Teilung.
onSplit(self)	Callback, wenn die Teilung abgeschlossen ist (und bei jeder erneuten Teilung, wenn autoSplit true ist). Erhält die SplitText-Instanz. Die Rückgabe eines GSAP-Tweens oder einer Timeline ermöglicht automatisches Rückgängigmachen/Synchronisieren dieser Animation beim erneuten Teilen.
mask	"lines", "words" oder "chars". Umhüllt jede Einheit in einem zusätzlichen Element mit overflow: clip für Masken-/Aufdeckeffekte. Nur ein Typ; Zugriff auf die Wrapper über das masks-Array der Instanz (oder Klasse -mask, wenn eine Klasse gesetzt ist).
tag	Wrapper-Element-Tag; Standard "div". Verwenden Sie "span" für Inline (Hinweis: Transformationen wie Rotation/Skalierung werden in manchen Browsern möglicherweise nicht auf Inline-Elementen dargestellt).
deepSlice	Wenn true (Standard), werden verschachtelte Elemente (z. B. <strong>), die sich über mehrere Zeilen erstrecken, unterteilt, damit Zeilen sich 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 werden Wörter in einen white-space: nowrap-Span eingewickelt, um Worttrennungen zu vermeiden. Wird ignoriert, wenn Wörter oder Zeilen geteilt werden. Standard false.
wordDelimiter	Wortgrenze: String (Standard " "), RegExp oder { delimiter: RegExp, replaceWith: string } für benutzerdefinierte Teilung (z. B. Nullbreitenverbinder für Hashtags oder nicht-lateinische Schriften).
prepareText(text, parent)	Funktion, die rohen Text und Elternelement erhält; modifizierten Text vor der Teilung zurückgeben (z. B. zum Einfügen von Umbruchmarkern 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 zusammenfassen; Standard true. Ab v3.13.0 werden auch Zeilenumbrüche berücksichtigt und können <br> für <pre> einfügen.
onRevert	Callback, wenn die Instanz rückgängig gemacht wird.

Tipps: Nur das teilen, was animiert wird (z. B. chars überspringen, wenn nur Wörter animiert werden). Bei benutzerdefinierten Schriftarten 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. text-wrap: balance vermeiden; es kann die Teilung beeinträchtigen. SplitText unterstützt kein SVG <text>.

Weitere Informationen: 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)

Deckt den Strich von SVG-Elementen auf oder versteckt 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 Pfades (Start- und Endpositionen), nicht „von A nach B über 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. geht gsap.to("#path", { drawSVG: "0% 100%" }) von dem, was es gerade ist, zum vollen Strich. Einzelner Wert (z. B. 0, "100%") bedeutet, dass 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; sonst wird nichts gezeichnet.

gsap.registerPlugin(DrawSVGPlugin);

// von nichts zum vollen 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: Betrifft nur den Strich (nicht die Füllung). Bevorzugen Sie Ein-Segment-<path>-Elemente; Mehrsegment-Pfade können in manchen Browsern seltsam dargestellt werden. Inhalte von <use> können nicht visuell geändert werden. DrawSVGPlugin.getLength(element) und DrawSVGPlugin.getPosition(element) geben Strichlänge und aktuelle Position zurück.

Weitere Informationen: DrawSVG

MorphSVG (MorphSVGPlugin)

Verwandelt eine SVG-Form in eine andere, indem das d-Attribut (Pfaddaten) animiert wird. Start- und Endformen müssen nicht die gleiche Anzahl an Punkten haben – MorphSVG wandelt in kubische Béziers um und fügt bei Bedarf Punkte hinzu. Verwenden für Icon-zu-Icon-Morphs, Formübergänge oder pfadbasierte Animationen. Funktioniert auf <path>, <polyline> und <polygon>; <circle>, <rect>, <ellipse> und <line> werden intern oder über MorphSVGPlugin.convertToPath(selector | element) umgewandelt (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,220...") sein. Wann immer möglich, beide Formen mit shapeIndex indexieren, um die besten Ergebnisse zu erzielen.

gsap.registerPlugin(MorphSVGPlugin);

// Einfache Morph-Animation von einem Pfad zu einem anderen
gsap.to("#path1", {
  duration: 1,
  morphSVG: "#path2",
  ease: "power1.inOut"
});

// Mit shapeIndex für bessere Ergebnisse
// (Indiziert Pfadsegmente für ein übereinstimmenderes Mapping von Start zu Ende)
gsap.to("#path1", {
  duration: 1,
  morphSVG: { shape: "#path2", shapeIndex: 5 },
  ease: "power1.inOut"
});

Wichtige Konfiguration:

Option	Beschreibung
shapeIndex	Zahl, die beeinflusst, wo der Morph beginnt und endet (Punkt-Mapping). Bessere Ergebnisse bei unterschiedlichen Formen. Standard "auto" (automatisch).
map	"size" (Standard), "complexity" oder "none", um zu steuern, wie Punkte zwischen Pfaden zugeordnet werden, bevor sie animiert werden.
type	"rotational" (Standard) oder "linear". Rotational versucht, die Drehrichtung beizubehalten; Linear wählt den kürzesten Weg.

Weitere Informationen: MorphSVG

MotionPath (MotionPathPlugin)

Animiert ein SVG-Element entlang eines Pfades (alternativ CSSe offset-path verwenden). Erlaubt detaillierte Kontrolle über Ausrichtung, Start/Ende und mehr. Verwenden zum Bewegen eines Elements entlang eines Pfades, z.B. für animierte Illustrationen oder Pfadverfolgung.

gsap.registerPlugin(MotionPathPlugin);

// Bewege das Objekt entlang des Pfades mit der ID "#path"
gsap.to("#object", {
  duration: 2,
  motionPath: {
    path: "#path",
    align: "#path",
    alignOrigin: [0.5, 0.5],
    autoRotate: true
  },
  ease: "power1.inOut"
});

Wichtige Konfiguration:

Option	Beschreibung
path	Selektor eines <path>, <polyline>, <polygon>, <circle>, <ellipse>, <rect>, <line>-Elements oder ein Array von Koordinatenpunkten
align	Objekt mit dem Pfad ausrichten (optional)
alignOrigin	[x, y] in Prozent (0–1) – Ursprung des Objekts, der mit dem Pfad ausgerichtet wird; Standard [0,5, 0,5]
autoRotate	Wenn true (oder Zahl), rotiert das Objekt automatisch, um der Pfadrichtung zu folgen
start, end	Zahl 0–1, wo auf dem Pfad die Animation beginnt/endet

Weitere Informationen: MotionPath

Physik

GSAP-Physik-Plugins (Physics2DPlugin, PhysicsPropsPlugin)

Simulieren realistische Bewegung mit Geschwindigkeit, Winkel, Schwerkraft und Luftwiderstand für jedes Objekt, wobei automatisch Einheiten von Pixeln pro Sekunde usw. verwendet werden. Physics2DPlugin für Bewegung in der Ebene (2D-Partikeleffekte, Projektilwürfe). PhysicsPropsPlugin für sich ändernde Eigenschaften (z. B. deckt sie den Luftwiderstand nicht ab; mit PhysicsProps eine opacity-Animation über Zeit mit Anfangsgeschwindigkeit und Beschleunigung versehen). Verwenden für Würfe, Partikel, realistische Bounces, Drifts.

gsap.registerPlugin(Physics2DPlugin);

gsap.to("#particle", {
  physics2D: {
    velocity: 400,
    angle: 45,
    gravity: 300,
    bounce: 0.8
  },
  duration: 3
});

Wichtige Konfiguration (physics2D):

Option	Beschreibung
velocity	Anfangsgeschwindigkeit in px/s
angle	Winkel in Grad (0 = rechts, 90 = runter)
gravity	Schwerkraft in px/s²
bounce	Elastizitätsfaktor beim Aufprall (0–1)

Wichtige Konfiguration (physicsProps):

Option	Beschreibung
acceleration	Beschleunigung in Ziel-Einheiten/s²
velocity	Anfangsgeschwindigkeit in Ziel-Einheiten/s
lazy	Wenn true, wird die Animation verzögert, bis eine neue Richtung festgelegt ist (nützlich für das Umschalten von Schwerkraftrichtungen)

Weitere Informationen: Physics2D – PhysicsProps

Easing

CustomEase

Erstellt benutzerdefinierte Easing-Funktionen mit einem cubic-bezier-ähnlichen Kurveneditor. Definieren Sie einen Namen und einen cubic-bezier-ähnlichen String oder SVG-Pfaddaten. Verwenden, wenn die integrierten power1, power2 usw. nicht ausreichen.

gsap.registerPlugin(CustomEase);

CustomEase.create("myCustomEase", "M0,0 C0.25,0.1 0.25,1 1,1");

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

Weitere Informationen: CustomEase

EasePack

Schneller Zugriff auf zusätzliche Easing-Optionen. (Elastic bouncy, Rough/Mittelwert-basiertes Easing, Slow-Mo, Stepped, Expo-Skalierung, Circle, Sine, Back.) Verwenden:

gsap.registerPlugin(EasePack);

gsap.to(".box", { duration: 1, ease: "elastic.out(1, 0.3)", x: 500 });

Weitere Informationen: EasePack

CustomWiggle

Erstellt ein „Wiggle“-Easing, das eine Eigenschaft für eine bestimmte Anzahl von Zyklen mit allmählicher Dämpfung oszillieren lässt – definieren Sie die Wellenform, Frequenz, Dämpfung und den Amplitudenabfall für präzise Kontrolle.

gsap.registerPlugin(CustomWiggle);

CustomWiggle.create("myWiggle", { wiggles: 3, amplitude: 1, damping: 0.7 });

gsap.to(".box", { duration: 2, ease: "myWiggle", x: 200 });

Weitere Informationen: CustomWiggle

CustomBounce

Erstellt ein Bounce-Easing mit präziser Kontrolle über die Anzahl der Bounces, Bounce-Festigkeit (Höhe) und Endverhalten – verwenden Sie es, um einen natürlichen Bounce-Effekt zu erzeugen oder das Ende sanft ausklingen zu lassen.

gsap.registerPlugin(CustomBounce);

CustomBounce.create("myBounce", { strength: 0.7, squash: 1, squashID: "mySquash" });

gsap.to(".box", { duration: 2, ease: "myBounce", y: 300 });

Weitere Informationen: CustomBounce

Entwicklungswerkzeuge

GSDevTools

Eine visuelle Benutzeroberfläche zum Steuern der Wiedergabe von GSAP-Animationen (Pause/Wiedergabe, Scrubbing, Zeitlupe, Geschwindigkeitsänderung). Ideal zum Debuggen oder Vorführen von GSAP-Animationen. Einfach GSDevTools.create() aufrufen, um auf die Steuerung der aktuellen Tween(s) zuzugreifen. Ace-Editor integriert für Live-Code-Bearbeitung.

gsap.registerPlugin(GSDevTools);

GSDevTools.create({ animation: tl });  // eine bestimmte Timeline steuern
// Oder: GSDevTools.create();  // die neueste Animation steuern

Wichtige Konfiguration:

Option	Beschreibung
animation	Eine GSAP-Tween/Timeline-Instanz, die gesteuert werden soll
container	Ein Element oder Selektor, in dem die GSDevTools-Oberfläche platziert werden soll
css	Ein CSS-Objekt zum Stylen des Containers
id	Eine ID, die dem Container zugewiesen wird

Weitere Informationen: GSDevTools

Fehlerbehebung

Problem	Lösung
Plugin nicht gefunden/Import fehlschlägt	Stellen Sie sicher, dass gsap >= 3.12 installiert ist; verwenden Sie den korrekten Import-Pfad gsap/PluginName; registrieren Sie das Plugin mit gsap.registerPlugin()
DrawSVG zeigt nichts	Stellen Sie sicher, dass das Element stroke und stroke-width gesetzt hat; prüfen Sie, ob display:none oder visibility:hidden die Anzeige verhindert
Draggable funktioniert nicht auf Mobilgeräten	Fügen Sie touch-action: none CSS auf dem Ziel-Element hinzu oder verwenden Sie Observer, falls nötig
SplitText erzeugt falsche Zeilenumbrüche	Verwenden Sie autoSplit: true mit onSplit(), oder teilen Sie, nachdem Schriftarten geladen sind; vermeiden Sie text-wrap: balance
MorphSVG sieht verzerrt aus	Versuchen Sie, shapeIndex auf beiden Pfaden zu setzen, oder verwenden Sie map: "complexity"; stellen Sie sicher, dass beide Pfade die gleiche allgemeine Strichrichtung haben
ScrollSmoother blockiert das Scrollen	Stellen Sie die korrekte DOM-Struktur sicher: #smooth-wrapper und #smooth-content; registrieren Sie ScrollTrigger vor ScrollSmoother; prüfen Sie die CSS-Höhe von #smooth-content (sollte height: auto; overflow: visible; sein)