SplitText ist ein spezielles Werkzeug, das in der GreenSock Animation Platform (GSAP) verwendet wird. Seine Hauptfunktion ist es, Text in kleinere, einzeln manipulierbare Einheiten zu zerlegen. Diese Einheiten können einzelne Buchstaben, ganze Wörter oder auch ganze Zeilen sein.

Wir haben SpliText als GSAP-Erweiterung in TYPO3-CE eingebaut. header, subheader und bodytext (p) können einzeln animiert werden.

Warum ist das nützlich?

• Animationen: Durch die Aufteilung des Textes kann man jeden einzelnen Buchstaben, jedes Wort oder jede Zeile unabhängig voneinander animieren. Das ermöglicht eine Vielzahl von dynamischen und kreativen Effekten, die mit einem einzigen Textblock nicht möglich wären. Buchstaben können so etwa nacheinander erscheinen, Wörter rotieren oder Zeilen in unterschiedlichen Geschwindigkeiten fliegen.
• Gestaltung: SplitText bietet eine präzisere Kontrolle über das Layout und das visuelle Verhalten von Text auf der Webseite. Man kann beispielsweise den Abstand zwischen einzelnen Wörtern dynamisch anpassen oder bestimmte Teile eines Satzes hervorheben.

Wie funktioniert es?

• Textauswahl: Zuerst wählt man den Text aus, den man bearbeiten möchte. Dies geschieht in der Regel, indem man das entsprechende HTML-Element, das den Text enthält, identifiziert.
• Aufteilung durch SplitText: Sobald der Text ausgewählt ist, übernimmt SplitText die Aufgabe, ihn in die gewünschten Einheiten (Buchstaben, Wörter, Zeilen) zu zerlegen. Intern erstellt SplitText dafür neue HTML-Elemente (z.B. `<span>`-Tags) um jede dieser Einheiten. Diese neuen Elemente werden dann in das Original-HTML eingefügt, wodurch der ursprüngliche Text visuell erhalten bleibt, aber intern aufgeteilt wird.
• Animation mit GSAP: Nachdem SplitText den Text zerlegt hat, sind die einzelnen Teile für GSAP zugänglich. Man kann dann die mächtigen Animationsfunktionen von GSAP nutzen, um diese neuen, individuellen Textteile zu bewegen, ihre Deckkraft zu ändern, ihre Farbe anzupassen oder andere Transformationen durchzuführen.

Es macht Text nicht nur lebendiger und dynamischer, sondern auch interaktiver, da man auf einzelne Teile des Textes reagieren oder sie anklicken kann.

Quellen:
GSAP SplitText Dokumentation: gsap.com/docs/v3/Plugins/SplitText/