ScrollMagic

Plugin zum Steuern von Events und Animationen abhängig von der Scrollposition. Kombiniert mit GSAP Animationen sehr mächtig.

Links

https://scrollmagic.io
https://scrollmagic.io/docs/

ScrollMagic und GSAP

Timeline Controlling mit ScrollMagic

ScrollMagic mit GSAP Basics

1. GSAP Timeline Animation erstellen
2. MagicScroll Controller erstellen.
3. MagicScroll Szene definieren und GSAP-Timeline an den MagicScroll Tween übergeben (dafür ist das animation.gsap Plugin von MagicScroll notwendig)

ScrollMagic Basisbeispiele

var controller = new ScrollMagic.Controller();

Szenen definieren wie und an welcher Stelle der Controller reagieren soll. Der Szene übergibt man Eigenschaften

var scene = new ScrollMagic.Scene();
var scene = new ScrollMagic.Scene({
  offset: 100, // start scene after scrolling for 100px
  duration: 400 // pin the element for 400px of scrolling
})
           

Dann übergibst du die Szene an den Controller. Auch mehrere Szenen (mit Komma getrennt) sind möglich.

controller.addScene(scene);

Alternativ kannst du die Szene direkt aus dem Scene Objekt mit der addTo() Funktion zum Controller hinzufügen

           
var scene = new ScrollMagic.Scene({
    triggerElement: '#trigger1'
    })
    .addTo(controller); // Add Scene to ScrollMagic Controller
    
    var scene2 = new ScrollMagic.Scene({
    triggerElement: '#trigger2'
    })
    .addTo(controller); // Add Scene to ScrollMagic Controller

Trigger Animation

Im ersten Fall wird die Animation an einer bestimmten Scroll Position ausgelöst. Die Animation selbst läuft nach dem Start automatisch ab. Folgendermaßen definieren wir die Szene.

 
// Create a new ScrollMagic Scene 
var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger1", 
    duration: 0, // 0 because duration is handled by gsap
    triggerHook: 0.5, // 0.5 -> trigger position at middle of browser window
    offset: 0
})

In der ScrollMagic Scene ist die Dauer auf 0 gesetzt. Das bedeutet die Dauer wird von der GSAP Timeline bestimmt.

Animation by Scroll

Im zweiten Beispiel soll die Timeline über die Scrollposition gesteuert werden. Das geht ganz einfach indem wir in der ScrollMagic Szene eine Scrolldauer übergeben. Scrolldauer bedeutet ein Zahlenwert der als Pixel interpretiert wird. Oder ein Prozentwert (als String) der für "Prozent der Viewport-Höhe steht.

duration: "25%", // 50% means scrolling half window. Number i.e. 300 means while scrolling 300 pixel

Pinned Animation

ScrollMagic liefert mit der setPin() Funktion eine einfache Möglichkeit ein Element auf dem Screen zu fixieren, solange die Animation läuft. In diesem Beispiel wurde einfach die Zeile

.setPin("#animation2 .animation") // pin this element

hinzugefügt.

Pinned = Expanded Content

Beachte, dass die Section dieser Animation höher ist, als die der vorigen, obwohl es die gleiche Animation ist. Das liegt daran, dass die angepinnte Animation sich Platz verschafft, indem sie den nachfolgenden Inhalt nach unten verschiebt.

Wenn du das nicht möchtest kannst du der setPin() Funktion die Eigenschaft pushFollowers: false mitgeben.

scene.setPin("#pin", {pushFollowers: false});