GSAP Demo – Animationen

Teil 1 – dm-animator Plugin

Diese drei Animationen werden über das dm-animator Admin-Panel konfiguriert. Die SVG-Elemente haben spezifische IDs – im Admin unter Selektoren eingetragen.

1. dashOffset – Strich läuft

Der stroke-dashoffset des Kreises animiert von 503 auf 0. Das SVG hat keine eigene Animation – dm-animator übernimmt das via GSAP Core.

2. draw – Pfad zeichnet sich

DrawSVGPlugin zeichnet jeden Pfad von 0 % bis 100 % – inklusive Stagger zwischen den Pfad-Segmenten. Trigger: ScrollTrigger beim Einblenden.

3. morph – Shape verwandelt sich

MorphSVGPlugin morpht zwischen Kreis und Diamant – ping-pong, loop: true. Die Ziel-Form liegt unsichtbar im SVG und wird als Selektor referenziert.

---

Teil 2 – GSAP Phase 2: Weitere Möglichkeiten

Diese Effekte nutzen GSAP direkt via inline Script – kein Admin-Panel nötig. GSAP + ScrollTrigger stehen global bereit dank dm-animator Plugin.

4. fadeInUp – Karten einblenden

Drei Elemente blenden beim Scrollen mit Versatz (stagger) ein. Klassischer Reveal-Effekt – opacity + y-Transform.

5. textReveal – Wörter enthüllen sich

Jedes Wort des Satzes blendet einzeln von unten herein – hinter einer unsichtbaren Maske (overflow:hidden). Split via JS.

6. clipReveal – Element enthüllt sich

clip-path animiert von rechts nach links – der Block wird enthüllt wie ein Vorhang, der sich öffnet.

7. Parallax – Ebenen scrollen unterschiedlich

Zwei Ebenen scrollen mit verschiedenen Geschwindigkeiten via ScrollTrigger scrub. Der Hintergrund bewegt sich langsamer als der Vordergrund.

---

Teil 3 – Weitere Plugins (alle kostenlos)

Seit GSAP 3.12 sind alle Plugins frei verfügbar – auch die ehemals kostenpflichtigen Club GreenSock Plugins. Alle werden direkt von jsDelivr CDN geladen.

8. SplitText – Buchstaben einblenden

SplitText zerlegt Text in einzelne Zeichen, Wörter oder Zeilen – mit korrektem Reflow. Hier animieren Buchstaben einzeln mit 3D-Klappeffekt herein.

9. ScrambleText – Text entschlüsselt sich

ScrambleTextPlugin übersetzt einen Text aus Zufallszeichen in lesbaren Inhalt – klassischer Hacker/Matrix-Dekodiereffekt.

10. TextPlugin – Typewriter

TextPlugin schreibt Text Zeichen für Zeichen – echter Typewriter-Effekt ohne CSS-Tricks.

11. Flip – Layout-Transition

Flip nimmt einen Schnappschuss des aktuellen Zustands, ändert das DOM, und animiert dann von Alt zu Neu – unabhängig von Position, Größe oder Eltern-Element.

12. MotionPath – Bewegung auf Pfad

MotionPathPlugin bewegt Elemente exakt entlang eines SVG-Pfads – mit optionalem autoRotate (dreht sich in Fahrtrichtung).

13. CustomEase · CustomBounce · CustomWiggle

Drei eigene Ease-Kurven: CustomEase (freie Bézier-Kurve), CustomBounce (kontrolliertes Abprallen), CustomWiggle (Wackelfrequenz definierbar).

14. Draggable + InertiaPlugin

Draggable macht beliebige Elemente greifbar. InertiaPlugin fügt Schwung hinzu – nach dem Loslassen gleitet das Element mit Trägheit weiter.

15. Physics2DPlugin – Schwerkraft

Physics2DPlugin simuliert 2D-Physik: Geschwindigkeit, Winkel, Schwerkraft, Reibung. Elemente reagieren wie echte Objekte.

16. EasePack – RoughEase

EasePack enthält spezielle Ease-Kurven: RoughEase (zitternde, unruhige Bewegung), SlowMo (langsam in der Mitte, schnell an den Enden). Gut für organische oder dramatische Effekte.

17. Observer – Richtungs-Detection

Observer erkennt Scroll-, Touch- und Pointer-Richtung einheitlich. Hier wechselt ein Element je nach Scroll-Richtung seine Bewegung.