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

GSAP - ProcessWire - UIKit
GSAP - Timelines
https://greensock.com
https://greensock.com/install
GSAP - Snippets
https://tympanus.net/codrops/2019/11/14/the-new-features-of-gsap-3/
https://greensock.com/scrollmagic - obsolet mit ScrollTrigger
https://css-tricks.com/writing-smarter-animation-code/ // *****
https://css-tricks.com/tips-for-writing-animation-code-efficiently/ // *****
GSAP - Plugins

Beispiele

GSAP - Infinite Textbanner

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

Basics

Animation Properties

CSS transform Eingenschaften sind performant

Liste der Properties: https://gsap.com/resources/get-started/

Umstieg von v2 auf v3 / Codesnippets

https://greensock.com/3-release-notes

Vieles wurde vereinfacht. Die meisten alten Funktionen funktionieren weiterhin. Neue Projekte sollte man in der neuen Syntax realisieren. Es kamen viele nützliche Dinge hinzu.

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

Keyframes

Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit.

gsap.to(".class", {keyframes: [ //<-- an array of keyframes!
  {x:100, duration:1},
  {y:200, duration:1, delay:0.5}, //create a 0.5 second gap
  {rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds
]});
</syntaxhighligh>

=== Neue Timeline Control Features ===
Standardmäßig startet ein Tween nachdem der vorige beendet ist. möchte man ihn gleichzeitig starten musste man früher mit Labels arbeiten, oder die Dauer wissen und ihn vorziehen. Jetzt geht das einfacher. '''Man kann eine nachfolgende Animation relativ zum Endpunkt ODER zum Startpunkt der vorigen positionieren.'''
* "<" references the most recently-added animation's START time
* ">" references the most recently-added animation's END time

<syntaxhighlight lang="javascript">
var tl = gsap.timeline();
tl.to(...)
  .to(..., "") //starts immediately after the previous tween's end time (sequenced)
  .to(..., ">-0.5") //overlaps with the previous tween by 0.5 seconds (because the number is negative)

Globale Timeline kontrollieren

gsap.globalTimeline.timeScale(0.1); //slow everything down
gsap.globalTimeline.pause(); //stop everything, though you might want to use gsap.exportRoot() instead so that you can exclude delayedCalls()

Sinnvollere Aliase

• Sinnvollere Aliase für CSS-Eigenschaften: x -> translateX, y -> translateY, rotate -> rotation

Geschickte Shortcuts für Rotation:

rotation:"270_short" //animates in the shortest direction!
rotation:"270_cw"    //animates clockwise
rotation:"270_ccw"   //animates counter-clockwise

Einheiten für x und y Transformationen möglich:

gsap.to(".class", {
  x:"50vw", //units! (default is px)
  y:"5em"
});

Sonstiges

• MotionPathPlugin ersetzt BezierPlugin. Hat zusätzlich einen Editor (nur Club Members)
• Neue random Funktion
• getProperty Funktion mit Konvertierung von Einheiten
• Es lassen sich "effects" definieren, die man dann als Animation / Timeline wieder verwenden kann. Auch Parameter kann man nutzen.
• Man kann jetzt width und height von DOM Objekten animieren die mit "auto" definiert sind.
• Snap Plugin - bietet mehrere Möglichkeiten auf bestimmte Werte zu runden (in Array, in der Nähe...)
• Zahlreiche nützliche Utility Funktionen