GSAP - ScrollTrigger

Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin.

https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

Quickstart

Eine gute Methode vorzugehen:

• Timeline-Animation ohne ScrollTrigger bauen
• ScrollTrigger Konfiguration in die Timeline einbauen.

MatchMedia

Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

MatchMedia verwaltet bei Resize Events auch die Timelines, killt diese wenn nötig oder erzeugt neue. Das erleichtert unglaublich viel Arbeit.

Vorgehen

• Timeline Animation erstellen
• ScrollTrigger Konfiguration in Timeline aufsetzen
• MatchMedia erstellen und Timeline Animation einsetzen.

Ähnlich wie bei MediaQueries umschließt MatchMedia die Animation. Genauer gesagt man übergibt in der MatchMedia Funktion alles was in diesem Query ausgeführt werden soll. MatchMedia überwacht aber auch Veränderungen und setzt alle Animationen zurück, wenn der Query nicht mehr passt. Timelines etc. werden also wieder gekillt und der Urzustand wieder hergestellt.

MatchMedia aufsetzen

Im Konfigurationsobjekt von MatchMedia übergeben wir als Schlüssel der das MediaQuery enthält. Als Wert übergeben wie eine Funktion. In dieser Funktion werden alle Timelines / Animationen gesetzt die für das Query gelten.

ScrollTrigger.matchMedia({
  "(minWidth: 800px)": function(){
    // all animations for 800px and up go here
  },
  "(maxWidth: 799px)": function(){
    // all animations for smaller screens than 799px go here
  },
  "all": function(){
    // animations valid for all viewport sizes go here
  }
});