201208Aug

Greensock: Tween-Library auch in JavaScript einsetzen

Wenn es um Animationen im Browser geht, kommt in der Regel ein handelsübliches JavaScript-Framework wie jQuery oder MooTools zum Einsatz. Die Bibliotheken leisten hervorragende Arbeit und liefern in der Regel saubere Animationen ab, wobei im mobilen Bereich CSS3-Animationen aufgrund ihrer Performanz vorzuziehen sind.
Dennoch gibt es Unterschiede bezüglich Geschwindigkeit und Komfort. Wer aus dem Flash-Bereich kommt, wird die GreenSock-Library zu schätzen wissen. Seit einigen Wochen ist die Tweening-Bibliothek auch für JavaScript erhältlich und leistet auch hier erstklassige Arbeit. Wie auch das Flash-Pendant gibt es verschiedene Ausführungen der Library, die mit unterschiedlichen Tweening-Funktionalitäten ausgestattet sind.

GreenSock Animation Platform for JavaScript

Die "GreenSock Animation Platform" (GSAP) kommt mit den Packages "TweenLite", "TweenMax", "TimelineLite" und "TimelineMax", wobei Letzere einen Container für Zeitleisten-Animationen darstellen. Eine einfache Tweening-Animation mit der JavaScript-Version der GSAP könnte so aussehen:

  • var photo = document.getElementById("photo");
    TweenLite.to(photo, 1.5, { width:100 });

Weitere Anleitungen und Details finden sich hier. Das Interessante ist nun, dass die GreenSock-Library bei einem Speed-Test im Vergleich zu jQuery oder anderen Bibliotheken erstaunlich gut abschneidet. Wenn es also um komplexe DOM-Animationen geht, ist die Library sicherlich einen Blick wert.