Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Greensock Animation Platform: Flüssige Animationen mit JavaScript

    Greensock Animation Platform: Flüssige Animationen mit JavaScript

Mit Version 12 der Greensock Animation Platform (GSAP) steht das aus der Flash-Welt bekannte Framework jetzt auch für performante Animationen mit JavaScript und HTML5 zur Verfügung. Wir stellen euch kurz vor, was mit GSAP möglich ist.

Greensock Animation Platform Projektseite

Peformante Tweenings mit JavaScript

Die Greensock Animation Platform (GSAP) ist alten Flash-Hasen besser geläufig als TweenLite oder TweenMax. Mit denen konnte man auch in den Vorgängerversionen schon komplexe, flüssig ablaufende Animationen mittels ActionScript 3 und 2 erstellen.

Greensock Animation Platform Showcase-Beispiel mit AS3

Die Greensock Animation Platform v12, die derzeit als Betaversion verfügbar ist, unterstützt auch JavaScript und erleichtert so das Erstellen von tweenbasierten Animationen mit HTML5 ohne Adobe Flash. In der JavaScript-Version der GSAP wird die gleiche API-Syntax verwendet, die schon für die Flash-Variante eingesetzt wurde. Der Fokus von GASAP liegt auch bei JavaScript-Tweenings auf der Vereinfachung von Animationsaufgaben und guter Performance für flüssige Tweenings. Die bekannteste Anfänger-Beispielanimation für Tweenings ist ein roter Ball, der mittels Eigenschaftenveränderungen zum Springen animiert wird.

Für freie Projekt können die JavaScripts TweenMax.js, TweenLite.js, TimelineMax.js und TimelineMin.js der Greensock Animation Platform kostenfrei verwendet werden. Wenn man mit GSAP nicht frei zugängliche, kommerzielle Websites, Spiele oder sonstige geldbringende Anwendungen erstellen möchte, muss man eine GSAP-Lizenz erwerben.

Das Lite-Tweening Framework bietet Grundfunktionalitäten für einfache Tweenings mit JavaScript. TweenMax enthält zusätzliche Plugins und Extrafunktionen. Für die Kombination und Sequenzierung von mehreren Tweenings stellt GSAP TimelineLite und TimelineMax zur Verfügung. Mit den GASAP Tweening JavaScript Bibliotheken lässt sich jeder numerische Wert über einfache Syntax tweenen. Für Feintuning der Animation steht eine Easing-Funktion bereit, die Beschleunigen, Abbremsen oder Slowmotion von Tweening-Objekten erlaubt. Mit den GASAP-JavaScript-Bibliotheken kann man nicht nur JavaScript-Objekte animieren, sondern auch DOM-Elemente und CSS-Werte z.B. auf dem HTML5 Canvas-Element. In Hinsicht auf Browserkompatibilität funktioniert GASAP nach eigenen Angaben fast vollständig in allen gängigen Browsern - zumindest mit Fallback-Lösung bis hin zu Internet Explorer 6.

Die Einbindung von TweenLite und Co. geschieht wie üblich bei JavaScript-Bibliotheken und ist mit gängigen Bibliotheken wie jQuery kompatibel. In der JavaScript API-Dokumentation findet man alle verfügbaren Klassen, Eigenschaften und Funktionen.

Einbinden der Greensock Animation JavaScript-Bibliothek in HTML

Ein Videotutorial bei Greensock erklärt ausführlich, wie man JavaScript Tweenings in HTML5 einbindet. In einem Speed-Test von Greensock ist am Beispiel einer klassischen Fliegende-Punkte-Animation zu erkennen, dass die GASAP-JavaScripte im Vergleich zu z.B. jQuery tatsächlich performanter und flüssiger ablaufen.

JavaScript Bibliotheken der Greensock Animation Platform v12 im Performance-Check

Die JavaScript Version der Greensock Animation v12 ist ein gelungenes Beispiel dafür, dass bewährte Dinge aus der Flash-Welt wie z.B. das Tweening-Konzept, manchmal auch in HTML5 Animationen hifreich sein können.

Was haltet ihr von den JavaScript-Tweening-Helfern?

Weiterführende Links:

Bildnachweis für die Newsübersicht: aka proligde / flickr.com, Lizenz: CC-BY

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

2 Reaktionen
Mark

Wir setzen die Frameworks von Jack Doyle bereits seit Jahren in Flashprojekten ein. Auch die neue JS Varianten sind Ihr Geld wert, sparen viel Zeit und eröffnen eine große Menge an Möglichkeiten.

Greez

Mark

Antworten
Marcus Graf

Werde ich mir mal anschauen, habe schon viel mit GreenSock und Flash gearbeitet und die Benchmarks sehen gut aus.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen