Erwecken Sie Ihre Benutzeroberfläche mit ScrollTrigger-Animationen in GSAP zum Leben

Jul 26, 2025 · 6 min read

Erwecken Sie Ihre Benutzeroberfläche mit ScrollTrigger-Animationen in GSAP zum Leben

Scroll-basierte Animationen können eine statische Website in ein fesselndes, interaktives Erlebnis verwandeln. Während CSS-Animationen für grundlegende Effekte nützlich sind, erfordert die Erstellung anspruchsvoller scroll-gesteuerter Animationen ein leistungsfähigeres Werkzeug. Das ScrollTrigger-Plugin von GSAP ist genau dieses Werkzeug – es ermöglicht Ihnen, polierte, performante Animationen zu erstellen, die durch die Scroll-Position ausgelöst werden.

In diesem Leitfaden lernen Sie, wie Sie ScrollTrigger-Animationen implementieren, die natürlich auf das Scrollen der Benutzer reagieren, mit praktischen Beispielen, die Sie heute in Ihren Projekten verwenden können.

Wichtige Erkenntnisse

ScrollTrigger verbindet Animationen mit der Scroll-Position für interaktive Erlebnisse
Verwenden Sie scrub, um den Animationsfortschritt direkt an die Scroll-Position zu koppeln
Fixieren Sie Elemente, um erweiterte scroll-basierte Effekte zu erstellen
Konfigurieren Sie start und end, um präzise zu steuern, wann Animationen ausgelöst werden
Verwenden Sie markers während der Entwicklung, um Auslösepunkte zu visualisieren

Was ist ScrollTrigger und warum sollten Sie es verwenden?

ScrollTrigger ist ein GSAP-Plugin, das Animationen mit der Scroll-Position verbindet. Im Gegensatz zu einfachen “on-scroll”-Bibliotheken, die Animationen nur auslösen, wenn Elemente in den Viewport gelangen, bietet ScrollTrigger präzise Kontrolle über:

Wann Animationen basierend auf der Scroll-Position beginnen und enden
Wie Animationen fortschreiten, während Benutzer scrollen (Scrubbing)
Das Fixieren von Elementen, während Benutzer an ihnen vorbeiscrollen
Die Erstellung komplexer scroll-basierter Interaktionen

Das Ergebnis? Animationen, die sich mit dem Scrollen der Benutzer verbunden anfühlen, anstatt nur beim Auslösen abzuspielen.

Erste Schritte mit ScrollTrigger

Lassen Sie uns zunächst die Grundlagen einrichten:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScrollTrigger Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        
        section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .spacer {
            height: 100vh;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="spacer"></div>
    
    <section>
        <div class="box"></div>
    </section>
    
    <div class="spacer"></div>
    
    <!-- GSAP and ScrollTrigger -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    
    <script>
        // Register the plugin
        gsap.registerPlugin(ScrollTrigger);
        
        // Your animations will go here
    </script>
</body>
</html>

Grundlegende ScrollTrigger-Animation

Beginnen wir mit einer einfachen Animation, die ausgelöst wird, wenn ein Element in den Viewport gelangt:

gsap.to(".box", {
    scrollTrigger: ".box", // Element that triggers the animation
    x: 300, // Move 300px to the right
    rotation: 360, // Rotate 360 degrees
    duration: 1.5, // Animation duration
    ease: "power2.out" // Easing function
});

Dieser Code bewegt und rotiert die Box, wenn sie in den Viewport gelangt. Aber das ist nur die Spitze des Eisbergs.

ScrollTrigger-Konfiguration verstehen

Um das volle Potenzial von ScrollTrigger zu entfalten, müssen wir seine Konfigurationsoptionen verstehen:

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box", // Element that triggers the animation
        start: "top center", // Start when top of box hits center of viewport
        end: "bottom center", // End when bottom of box hits center of viewport
        toggleActions: "play pause reverse reset", // Actions on enter, leave, enter back, leave back
        markers: true, // Shows markers for debugging (remove in production)
    },
    x: 300,
    rotation: 360,
    duration: 2
});

Die Eigenschaften start und end definieren, wann die Animation aktiviert und deaktiviert wird. Das Format ist "[Auslöser-Element-Position] [Viewport-Position]".

toggleActions steuert, wie sich die Animation in vier wichtigen Momenten verhält:

Beim Betreten des Auslösebereichs
Beim Verlassen des Auslösebereichs
Beim erneuten Betreten des Auslösebereichs beim Hochscrollen
Beim Verlassen des Auslösebereichs beim Hochscrollen

Optionen umfassen: play, pause, resume, reverse, restart, reset, complete und none.

Scroll-gesteuerte Animationen mit Scrub erstellen

Die wahre Magie geschieht mit der scrub-Eigenschaft, die den Animationsfortschritt direkt an die Scroll-Position koppelt:

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box",
        start: "top center",
        end: "bottom center",
        scrub: true, // Links animation progress to scroll position
        markers: true
    },
    x: 300,
    rotation: 360,
    backgroundColor: "#e74c3c"
});

Mit scrub: true schreitet die Animation beim Scrollen des Benutzers fort und kehrt sogar beim Zurückscrollen um. Für eine gleichmäßigere Animation verwenden Sie einen Zahlenwert wie scrub: 0.5, um eine leichte Verzögerung hinzuzufügen.

Elemente während des Scrollens fixieren

Eine der leistungsfähigsten Funktionen von ScrollTrigger ist das Fixieren von Elementen an Ort und Stelle, während der Benutzer scrollt:

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box",
        start: "center center",
        end: "+=300", // End 300px after the start position
        pin: true, // Pin the box in place during the animation
        scrub: 1,
        markers: true
    },
    x: 300,
    rotation: 360,
    scale: 1.5,
    backgroundColor: "#9b59b6"
});

Dies fixiert die Box an Ort und Stelle, während die Animation abläuft, und erzeugt einen parallax-ähnlichen Effekt. end: "+=300" bedeutet, dass die Animation nach dem Scrollen von 300 Pixeln über den Startpunkt hinaus endet.

Eine Enthüllungsanimation erstellen

Lassen Sie uns eine praktische Enthüllungsanimation für Text oder Bilder erstellen:

<div class="spacer"></div>

<section class="reveal-section">
    <div class="reveal-container">
        <h1 class="reveal-text">Scroll-gesteuerte Animationen</h1>
        <p class="reveal-text">Erstellen Sie fesselnde Benutzererlebnisse mit GSAP ScrollTrigger</p>
    </div>
</section>

<div class="spacer"></div>

.reveal-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reveal-container {
    max-width: 800px;
    text-align: center;
    overflow: hidden;
}

.reveal-text {
    opacity: 0;
    transform: translateY(50px);
}

// Reveal animation
gsap.utils.toArray('.reveal-text').forEach(text => {
    gsap.to(text, {
        scrollTrigger: {
            trigger: text,
            start: "top 80%", // Start when top of text is 80% from top of viewport
            toggleActions: "play none none none"
        },
        y: 0,
        opacity: 1,
        duration: 1,
        ease: "power2.out"
    });
});

Dies erzeugt einen sauberen Enthüllungseffekt, wenn jedes Textelement in den Viewport gelangt.

Einen Parallax-Effekt erstellen

Parallax-Effekte verleihen Ihrer Website Tiefe. So erstellen Sie einen:

<div class="parallax-container">
    <div class="parallax-bg"></div>
    <div class="parallax-content">
        <h1>Parallax-Effekt</h1>
    </div>
</div>

.parallax-container {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%; /* Extra height for movement */
    background-image: url('your-background-image.jpg');
    background-size: cover;
    background-position: center;
}

.parallax-content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
}

// Parallax effect
gsap.to(".parallax-bg", {
    scrollTrigger: {
        trigger: ".parallax-container",
        start: "top bottom",
        end: "bottom top",
        scrub: true
    },
    y: -100, // Move background up by 100px as we scroll
    ease: "none"
});

Dies erzeugt einen einfachen Parallax-Effekt, bei dem sich der Hintergrund mit einer anderen Geschwindigkeit als der Vordergrund bewegt.

Horizontaler Scroll-Bereich

Die Erstellung eines horizontalen Scroll-Bereichs ist ein weiterer beeindruckender Effekt:

<div class="spacer"></div>

<section class="horizontal-scroll">
    <div class="horizontal-container">
        <div class="panel">Panel 1</div>
        <div class="panel">Panel 2</div>
        <div class="panel">Panel 3</div>
        <div class="panel">Panel 4</div>
    </div>
</section>

<div class="spacer"></div>

.horizontal-scroll {
    overflow: hidden;
    height: 100vh;
}

.horizontal-container {
    display: flex;
    width: 400%; /* 100% * number of panels */
    height: 100%;
}

.panel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

.panel:nth-child(1) { background-color: #3498db; }
.panel:nth-child(2) { background-color: #2ecc71; }
.panel:nth-child(3) { background-color: #e74c3c; }
.panel:nth-child(4) { background-color: #9b59b6; }

// Horizontal scroll
gsap.to(".horizontal-container", {
    scrollTrigger: {
        trigger: ".horizontal-scroll",
        start: "top top",
        end: "+=3000", // Scroll distance
        pin: true,
        scrub: 1,
    },
    x: () => -(document.querySelector(".horizontal-container").offsetWidth - window.innerWidth),
    ease: "none"
});

Dies erstellt einen Bereich, der horizontal scrollt, während der Benutzer vertikal scrollt.

Tipps zur Leistungsoptimierung

ScrollTrigger-Animationen können die Leistung beeinträchtigen, wenn sie nicht sorgfältig implementiert werden. Hier sind einige Tipps:

Verwenden Sie will-change sparsam: Wenden Sie es nur auf Elemente an, die tatsächlich animiert werden
Vermeiden Sie die Animation von Layout-Eigenschaften: Bleiben Sie bei transform und opacity, wenn möglich
Bündeln Sie ähnliche Animationen: Verwenden Sie gsap.utils.toArray() und durchlaufen Sie Elemente
Beenden Sie ScrollTrigger, wenn sie nicht benötigt werden: Verwenden Sie scrollTrigger.kill() für Single-Page-Anwendungen
Reduzieren Sie die Marker-Verwendung: Entfernen Sie markers: true in der Produktion

Häufige Probleme beheben

Animation startet zu früh/spät

Wenn Ihre Animation zu unerwarteten Zeiten ausgelöst wird, überprüfen Sie Ihre start- und end-Werte. Verwenden Sie markers: true, um Auslösepunkte zu visualisieren.

Ruckelige Animationen

Für gleichmäßigere Animationen verwenden Sie scrub: 0.5 oder höher anstelle von scrub: true, um eine leichte Verzögerung hinzuzufügen.

Mobile Kompatibilitätsprobleme

Mobile Browser handhaben Scroll-Events unterschiedlich. Testen Sie gründlich auf mobilen Geräten und erwägen Sie die Verwendung von ScrollTrigger.matchMedia(), um verschiedene Animationen für verschiedene Bildschirmgrößen zu erstellen.

Fazit

Mit diesen Techniken können Sie Scroll-Animationen erstellen, die natürlich auf Benutzerinteraktionen reagieren und Ihre Benutzeroberfläche verbessern, ohne die Benutzer zu überfordern. Beginnen Sie mit einfachen Effekten und integrieren Sie nach und nach erweiterte Techniken, wenn Sie sich mit den Möglichkeiten von ScrollTrigger vertraut machen.

Häufig gestellte Fragen

Ja, aber Sie müssen ScrollTrigger-Instanzen ordnungsgemäß einrichten und bereinigen, wenn Komponenten gemountet/unmountet werden.

ScrollTrigger ist für GSAP konzipiert, aber Sie können seine Callback-Funktionen verwenden, um andere Bibliotheken auszulösen.

Verwenden Sie Prozentangaben für die Positionierung und aktualisieren Sie ScrollTrigger bei Fenstergrößenänderung mit ScrollTrigger.refresh().

Die Grundfunktionalität ist kostenlos, aber einige erweiterte Funktionen erfordern eine GreenSock Club-Mitgliedschaft.

Verwenden Sie markers: true, um Auslösepunkte zu visualisieren und console.log in Callback-Funktionen, um den Fortschritt zu verfolgen.

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.

Self-Host Try Cloud Free

Loved by thousands of developers