Web: Animation mit GSAP

In CSS können mithilfe von Animation/Keyframes mittlerweile Animationen recht einfach erstellt werden. Sollen aber mehrere Animationen z. B. für unterschiedliche Elemente in Reihe geschaltet werden, kann dies relativ schnell komplex werden.

Und hier kommt u. a. GSAP ins Spiel. Dabei handelt es sich um eine umfangreiche Bibliothek, die schon über 10 Jahre existiert und sogar Animationen im nicht so beliebten Internet Explorer ermöglichte 😆. Mit ein paar einzelnen Funktionen aus der Bibliothek kann man sich sein Leben allerdings bereits wesentlich vereinfachen.

Beispiele

Fangen wir einfach an. Es gibt drei Boxen und diese sollen beim Start gleichzeitig eingeblendet werden. Hierfür benötigten wir nur die Methode „from“ und definieren eine „duration“ und „opacity“, von der aus die Animation zum Standard gemacht werden soll.

Wenn die Boxen nicht gleichzeitig, sondern nacheinander eingeblendet werden sollen, dann fügen wir zusätzlich die „stagger“ Eigenschaft hin.

Mithilfe von „timeline“ werden zwei unterschiedliche Bereiche kombiniert.

GSAP verwendet als Standard „easing“ den Wert „power1.out“. In der Dokumentation gibt es eine Übersicht, welche Easings standardmäßig unterstützt werden.

Das nächste Beispiel entspricht dem vorherigen Beispiel, allerdings mit „ease: bounce.out“.

GSAP stellt unterschiedliche Hooks bereits, mit denen z. B. JavaScript ausgeführt werden kann, wenn eine Animation startet oder diese beendet wird. Das nächste Beispiel habe ich um ein Delay von einer Sekunde sowie einer Anzeige ergänzt, die den aktuellen Status der Animation ausgibt.

Eigenschaften können sich auch über eine Funktion berechnen lassen.

Wird „repeat“ angegeben, dann wird die Animation mehrfach ausgeführt. Der Wert -1 gibt an, dass die Animation unendlich oft ausgeführt wird. Um die Animation vor und zurück laufen zu lassen, muss „yoyo: true“ angegeben werden.

Im nächsten Beispiel wird die Flexbox von „flex-col“ auf „flex-row“ geändert. Hierfür wird das Flip-Plugin benötigt, welches vor der Änderung ein State-Objekt erstellt und nach der Änderung der CSS-Klassen die Änderungen animiert.

Und als letztes Beispiel mit den Boxen noch ein bisschen 3D 😜.

GSAP kann, unabhängig von der Animation von HTML-Elementen auch einfache JavaScript-Objekte animieren. Im nachfolgenden Beispiel wird eine Nummer raufgezählt.

Bei meinen Beispielen handelt es sich nur um die Spitze des Eisbergs. Wer mehr wissen will, sollte sich die Dokumentation oder weitere Beispiele ansehen (die wirklich sehr empfehlenswert sind 😀).