GSAP Animationen für TYPO3 - Bewegte Elemente ohne Komplikationen
Was ist GSAP?
GSAP steht für GreenSock Animation Platform. Eine JavaScript-Bibliothek, die Elemente auf Webseiten bewegt. Das System übersetzt einfache Anweisungen in browserkompatible Animationen. Ein Bild soll von links nach rechts rutschen? GSAP erledigt die Mathematik und Browser-Kompatibilität.
Der Entwickler definiert Module, Start, Ende, Dauer, etc. Komplexe Animationslogik wird auf wenige Zeilen reduziert.
GSAP kann man hier laden und man kann sich detailliert informieren: https://gsap.com/
Seit 2025 ist es auch kostenlos verfügbar.
Integration in TYPO3
"GSAP-Basics" in TYPO3
Wir haben Teile der GSAP-Module in TYPO3-Funktionselemente eingebaut. Zum Beispiel im Standardelement “Text & Medien” von TYPO3 (textmedia). Unseren Kunden stehen diese Module zur Verfügung. Wir planen eine Veröffentlichung dieser Erweiterung als Extension für TYPO3.
Über “GSAP Basics” lassen sich hier einzelne Teile aktivieren und animieren – die da wären:
- Das gesamte Element
- Header (Überschrift)
- Subheader (Unterüberschrift)
- Bodytext (Haupttext)
- Bild(er)
- Individuelle, sich wiederholende Elemente (im Editor oder Bilder)
Diese Teile können abhängig oder unabhängig voneinander animiert werden. Eine sinnvolle Trennung, die verhindert, dass sich verschiedene Animationen gegenseitig ins Gehege kommen, ist ebenfalls eingebaut.
Interessant sind die Komponenten im Zusammenspiel!
Die wichtigsten GSAP-Komponenten
SplitText: Zerlegt Text in animierbare Einheiten. Jeder Buchstabe, jedes Wort oder jede Zeile erhält ein eigenes span-Element. Aus "HALLO WELT" wird ein Haufen HTML-Tags. Aber ein zweckmäßiger Haufen.
ScrollTrigger: Überwacht die Scroll-Position. Startet Animationen, wenn Elemente ins Sichtfeld kommen. Funktioniert erstaunlich zuverlässig, selbst bei aggressivem Scrolling-Verhalten.
Smooth Scrolling: Ersetzt Browser-Standard-Scrolling durch geschmeidige Bewegungen. Kann auf älteren Geräten etwas träge wirken, aber die meisten Nutzer empfinden es als angenehmer.
Parallax-Effekte: Verschiedene Ebenen bewegen sich mit unterschiedlichen Geschwindigkeiten. Das Gehirn interpretiert dies als räumliche Tiefe. Ein netter Nebeneffekt der menschlichen Wahrnehmung.
Beispiele, wie man die nutzen kann, zeigen wir auf den Folgeseiten:
Wie dezente Animationen die Nutzerfreundlichkeit steigern können
GSAP & Usability
Dezente Animationen können Websites lebendig machen, führen den Blick und steigern die Nutzerfreundlichkeit. Weniger ist mehr – kleine Effekte, große Wirkung.
- Sanfte Seitenaufbau-Animationen ohne harten Content-Pop
- Stufenweise Inhalts-Enthüllung für bessere Aufmerksamkeitssteuerung
- Hover-Effekte für interaktive Elemente
- Loading-Zustände ohne harte Sprünge
Weniger ist mehr
Zu viele oder übertriebene Effekte lenken ab und können sogar stören. Unser Ansatz: dezente Animationen, die den Inhalt unterstützen – nicht überlagern. So entsteht ein angenehmes Nutzungserlebnis, das im Kopf bleibt.
