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

Toggle Actions

toggleActions

onEnter, onLeave, onEnterBack, and onLeaveBack
default is play none none none
"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". 
onEnter -> "normales betreten" von vorne
onLeave -> nach komplettem Durchgang nach unten
onEnterBack -> Eintritt von hinten
onLeaveBack -> zurück bis Vor den Anfang

So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

Probleme mit Inline Styles und mediaQuery beheben - ScrollTrigger.saveStyles()

Manchmal kommt es vor, dass eine Animation einen Inline Style setzt, der ein mediaQuery in CSS "überschreibt". Wenn man dieses Verhalten nicht möchte und lieber den Zustand beim Laden der Seite herstellen möchte kann man die Funktion saveStyles nutzen. Mit saveStyles kann man vor der Animation den Zustand von DOM-Objekten speichern. GSAP setzt diese dann wieder zurück wenn der MatchMedia Zweig nicht mehr zutrifft.

ScrollTrigger.saveStyles('.myElement, .myOtherElement);

Beispiele Tipps etc.

Horizontal Scroll

https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97

Mit Tablet Swipe:

https://greensock.com/forums/topic/28016-horizontal-scroll-with-draggable-syncing-the-two/?tab=comments#comment-138080
https://codepen.io/GreenSock/pen/ZELQqeJ?editors=0010
https://greensock.com/forums/topic/25544-horizontal-scroll-trigger-tablet-mobile/

Probleme beheben

Sprünge

https://greensock.com/st-mistakes/#to-issues

Wichtig zu wissen: ScrollTrigger speichert die Startwerte für eine Animation wenn der Trigger erzeugt wird. Dadurch können Sprünge entstehen, wenn mehrere Trigger auf eine Eigenschaft angewendet werden, das Objekt sich aber zum Startpunkt bereits verändert hat.

Lösungen - immediateRender Eigenschaft - fromTo statt to nutzen - Ein ScrollTrigger für mehrere Animationen (Timeline)

Abhängigkeiten vom Viewport

Wenn Objekte sich relativ zum Viewport ausrichten muss man darauf achten, dass sich die Werte bei einer Veränderung des Browsers anpassen. Das funktioniert mit Funktionen statt statischen Werten:

end: `+=${elem.offsetHeight}` // won't be updated on refresh
end: () => `+=${elem.offsetHeight}` // will be updated

Overlaping Issued / Überlappungen vermeiden

https://www.youtube.com/watch?v=SVjndrQ6v9I

Zwei Wege entweder

Toggle Actions (die Regel)

play complete reverse reset
// wird zu

oder

preventOverlaps / fastScrollEnd