GSAP Grundwissen – Wie verwende ich den Scrolltrigger?

Ich habe euch ja beim letzten Mal erklärt wie ihr in GSAP eine Animation erstellen könnt und heute geht es weiter. Ich zeige euch nun wie ihr so eine Animation direkt mit einem Scrolltrigger verbinden könnt, so dass die Animation direkt durchs Scrollen auf einer Webseite gesteuert wrid.

Video

Video

GSAP Bibliothek

Damit ihr GSAP verwenden könnt, müsst ihr die Javascript Bibliothek natürlich zuerst ein eure Webseite einbinden. Hier findet ihr den entsprechenden Code auf der GSAP Webseite

HTML

<div class="start">
      <h1>start</h1>
    </div>
    <div class="animation">
      <div class="msg">demo</div>
    </div>
    <div class="ende">
      <h1>ende</h1>
    </div>

CSS

.start {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--sec1);
}
.start h1 {
  color: var(--dschrift);
  font-size: 5rem;
}
.ende {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--sec3);
}
.ende h1 {
  color: var(--schrift);
  font-size: 5rem;
}

.animation {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--sec2);
}

.msg {
  color: var(--anischrift);
  font-size: 5rem;
  font-weight: 600;
  
}

Javascript

gsap.registerPlugin(ScrollTrigger)

gsap.from(".msg", {
    x: -400,
    duration: 3, /* wenn scrub kann gelöscht werden */
    scrollTrigger: {
        trigger: ".animation",
        
        start: "top 50%",
        end: "top 30%",
        
        // gehört zur zeit
        // events: onEnter onLeave onEnterback onLeaveback
        toggleActions: "restart pause reverse reverse",
        //options: play pause resume reset restart complete reverse none
        
       scrub: true, /* an mausbewegung verknüpfen */
       markers: true,
    }
})