Intro

Scrolltrigger

Imports

import {gsap} from 'gsap'; wird benötigt, um die GreenSock komponenten zu importieren.

import ScrollTrigger from 'gsap/ScrollTrigger'; wird benötigt, damit der ScrollTrigger geladen wird

---

Initialisierung

Damit man den ScrollTrigger nutzen kann, muss man in der Funktion ngOnInit() das Registrieren des Scrolltriggers aufrufen

ngOnInit(): void { 
   gsap.registerPlugin(ScrollTrigger);
   this.scroll();
}

In die Funktion this.scroll(); kommt die logik rein

---

Benutzung

gsap.to("#clue", { //"#clue" ist das Element, welches animiert werden sollen
        scrollTrigger: { // einleiten des Scrolltriggers
          trigger: ".hl", // welches Element die Animation auslösen soll
          start: "1200px", // an welchen Punkt die Animation startet
          end: "+=300", // wie lange die Animation geht
          scrub: true, // dient dazu, dass beim zurückscrollen die Animation rückwärts spielt
          //markers: true //lässt Marker anzeigen, welche die Start und Endpunkte visualisieren
        },
        opacity: 0 // Animationsveränderungen. Hier wird zum Beispiel die Deckkraft auf 0 gesetzt
});

gsap.to() dient zum Aufruf einer neuen GreenSock funktion, in der zu diesen Parametern animiert wird. Es gibt auch noch .from. Hier wird von den Parametern zu den Objektangaben animiert.

Der erste Wert ist das Objekt, welches animiert werden soll. Nach dem Komma kommt der Scrolltrigger. Wie genau dieser Funktioniert findet ihr hier: ScrollTrigger Dokumentation

mit trigger: ist das Element gemeint, dass zum Starten und Enden der Animation beobachtet werden soll.

Wissenswert ist, dass man für den Start- und Endwert auch feste Pixeleinheiten schreiben kann. Dadurch können fixe Start- und Endpunkte genutzt werden.

Als nächste Elemente kommen die Pararmeter, die das Objekt verändern.

---

Aufbau HTML und CSS

Um sich das Leben einfacher zu machen, sollte man alle Elemente, die animiert werden sollen, in ein Container einfügen. Diesen kann man entsprechend der Scrolldistanz eine feste Höhe oder Breite geben. Je nachdem in welche Richtung man scrollen will.

Die CSS Elemente haben am besten eine position: fixed; Das sorgt dafür, dass die Objekte sich nicht bewegen, wenn gescrollt wird. Somit wird die nachfolgenden Animationen einfacher zu steuern sein, da man fixe Pixelwerte nutzen kann.