GSAP

Greensock Animation Plattform

GSAP ist eine Sammlung von JavaScripten zur Animation. Es ist im Moment der quasi Standard wenn es um JavaScript Manipulation von CSS Eigenschaften geht.

GSAP ist in der Basisversion frei. Mit einem kostenpflichtigen Account bekommt man zusätzliche Plugins.

GSAP übernimmt einem Arbeit ab, da es recht gut mit verschiedenen Browsern und Plattformen umgehen kann und außerdem performant arbeitet.

Links

greensock.com
greensock.com/install

Quickstart

Einbinden

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="js/main.js"></script>

Einfache Animationen

gsap.to(".logo", {duration: 2, x: 300}); // Dies nennt sich eine Timeline. 300px nach rechts bewegen in 2s mit Standardwerten (ease out...)
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8"}); // CSS Eigenschaften die normal ein - haben, werden als Camelcase geschrieben.
// Eigenschaften mit Zeichen in Anführungsstrichen. Fast alles lässt sich Animieren.
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8", borderRadius: "50%", border: "4px solid white"});

Ease In Out

https://greensock.com/docs/v3/Eases
gsap.to(".logo", {duration: 1, x:300, ease: "power2.inOut"});