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)
https://greensock.com/docs/v3/Plugins/ScrollTrigger Mit Demos
https://css-tricks.com/tips-for-writing-animation-code-efficiently/
https://greensock.com/forums/topic/31761-add-scrolltrigger-timeline-into-matchmedia-functions/#comment-158780

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

start, end, trigger, endTrigger

Legt fest welches Element und welcher Teil des Elements eine Aktion auslöst.

Standard:

Start wenn Decke von Trigger Element erreicht unteren Viewport
Ende wenn Boden von Trigger Decke von Viewport erreicht (+ 1px)
start: top bottom
end: bottom top

Default

start: 

Toggle Actions

toggleActions legen Fest was mit der Animation passiert, wenn Start oder Endpunkte erreicht werden. Daher hängen sie auch eng mit start und stop zusammen.

onEnter, onLeave, onEnterBack, and onLeaveBack

EREIGNISSE
onEnter -> Startpunkt des Elements erreicht Startppunkt => Beginn es Durchgangs
onLeave -> Enpunkt des Elements hinter Endposition => Durchgang komplett
onEnterBack -> Endpunkt des Elements zurück vor Endposition
onLeaveBack -> Startpunkt des Elements zurück vor Startposition

JEDES EREIGNIS KANN ETWAS AUSLÖSEN:
"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". 
toggleActions: play none none none //default Einstellung

BEISPIELE
play pause resume reset 
Container Startpunkt wird sichtbar (onEnter) animation abspielen
Container Endpunkt verschindet oben (onLeave) animation pausieren
Container Endpunkt kommt von oben zurück (onEnterBack) > Animation weiterspielen
Container Startpunkt vollständig zurückgescrollt - verschwindet unten (onLeaveBack) > Animation reset (zurückspulen)

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

Pinning

pinnedContainer: '.Section'
pin: true, // oder Container z.b. '.myPinnedContainer'
pinSpacing: true

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