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"});

Umstieg von v2 auf v3

Vereinheitlichung der Objekte

• Keine Unterscheidung mehr zwischen TweenMax und TweenMax Lite, Timeline... Es gibt nur noch ein gsap Objekt.
• Duration ist jetzt im Eigenschaften Objekt.

//OLD - duration was 2nd parameter
TweenMax.to(".class", 1, {x:100});
//NEW - duration is now a property of the vars object
gsap.to(".class", {duration:1, x:100});

• Ease ist einfacher

//OLD ==> NEW
Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor
Elastic.easeIn ==> "elastic.in"
Elastic.easeInOut ==> "elastic.inOut"
Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)"

//and the other configurable eases are much easier!:
SteppedEase.config(5) ==> "steps(5)"
SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)"
RoughEase.ease.config({points:40}) ==> "rough(40)"
ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)"

Vererbung von Timeline Eigenschaften

gsap.timeline({defaults:{ease:"back", duration:2}})
    .to(".class-1", {x:100}) //inherits the ease and duration from the parent timeline!
    .to(".class-2", {y:200}) //this one too

Staggering als Eigenschaft

Staggering in den Properties. Früher mußte man stagger Funktionen nutzen (staggerTo()...)

gsap.to(".class", {
  x:"+=100",
  duration:1,
  stagger: 0.5 //simple stagger of 0.5 seconds
});

//or get advanced:
gsap.to(".class", {
  x:"+=100",
  duration:1,
  stagger: {
    amount:2,
    from:"center",
    grid:"auto",
    onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
  }
});