Horizontale Scroll-Sektion in Elementor mit GSAP & ScrollTrigger

Was du mit diesem Tutorial lernst

Warum GSAP und ScrollTrigger? Was diese Tools leisten und wie sie deine Website flüssiger und dynamischer machen.
Grundlagen des Codes und wie du ihn verwendest: Schritt-für-Schritt-Erklärung des Codes zur Erstellung des Scroll-Karussells.
Was wir mit dem Code erstellen: Beispiel, damit du weißt, wie das Endergebnis aussehen kann.
Best Practices für den Einsatz in Elementor: So setzt du das Setup um und stellst sicher, dass alles glatt läuft.
Häufige Fehler und ihre Lösungen: Was tun, wenn es hakt?

Warum GSAP und ScrollTrigger?

GSAP ist eine leistungsstarke JavaScript-Bibliothek, die Animationen nahtlos und flüssig abspielt. Zusammen mit ScrollTrigger, einem Plugin für GSAP, kannst du deine Inhalte abhängig vom Scroll-Verhalten animieren. Perfekt für kreative Layouts wie horizontale Scroll-Effekte – ideal, um ein Markenerlebnis zu schaffen, das sich vom Standard-Scrolling abhebt.

Vorteile:

Ruckelfreie Animationen: GSAP unterstützt GPU-Beschleunigung und liefert schnelle Animationen, selbst auf Mobilgeräten.
Vollständige Kontrolle über das Scroll-Verhalten: ScrollTrigger macht es einfach, Animationen an verschiedene Scroll-Positionen zu koppeln.
Flexibilität und Präzision: Besonders bei Elementor kann es knifflig sein, flüssige Animationen umzusetzen. GSAP und ScrollTrigger nehmen dir hier die Arbeit ab.

Was du nach diesem Tutorial erstellen kannst

Der Scroll-Effekt: Wenn der Benutzer den Abschnitt erreicht, in dem sich unsere Container befinden, wird der Inhalt horizontal verschoben, sodass die Slides nacheinander ins Bild gleiten.
Fixierter Container: Während die Slides durchlaufen, bleibt der äußere Container fixiert, sodass es aussieht, als ob sich die Slides innerhalb eines Rahmens bewegen.
Fließende Animation: Dank GSAP läuft die Animation ruckelfrei und passt sich der Scroll-Geschwindigkeit an.

Ein dynamisches, interaktives Scroll-Karusell, das deine Website einzigartig macht und die Aufmerksamkeit der Besucher fesselt. Ideal für Galerien, Feature-Demos, oder kreative Storytelling-Bereiche!

Schau dir hier das Tutorial auf YouTube an:

Schritt-für-Schritt-Anleitung: Horizontaler Scroll-Effekt in Elementor

Hier ist der komplette Code für den Effekt. Keine Sorge, wir gehen ihn danach Zeile für Zeile durch, damit du weißt, was jede Zeile bewirkt.

				
					<script data-minify="1" src="https://www.webamaze.de/wp-content/cache/min/1/ajax/libs/gsap/3.12.5/gsap.min.js?ver=1741628717" data-rocket-defer defer></script>
<script data-minify="1" src="https://www.webamaze.de/wp-content/cache/min/1/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js?ver=1741628717" data-rocket-defer defer></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Wähle den horizontal-scroll Container und die Slides aus
  const horizontalScroll = document.querySelector('.horizontal-scroll');
  const slides = document.querySelectorAll('.slide');

  // Berechne die gesamte Breite der horizontalen Scrollstrecke
  const totalScrollWidth = slides.length * window.innerWidth;

  // Erstelle die ScrollTrigger Animation
  gsap.to(horizontalScroll, {
    x: -totalScrollWidth + window.innerWidth,  // Verschiebe die Slides nach links
    ease: "none",
    force3D: true,  // Aktiviert die GPU-Beschleunigung in GSAP
    scrollTrigger: {
      trigger: ".scroller",           // Der Bereich, der den ScrollTrigger aktiviert
      start: "top top",                // Startet, wenn der äußere Container den oberen Rand erreicht
      end: "+=" + totalScrollWidth,    // Ende basierend auf der Gesamtbreite der Slides
      scrub: 0.5, // Kleine Verzögerung für sanftere Berechnung
    }
  });
});
</script>

1. HTML-Grundstruktur in Elementor

Zuerst erstellst du in Elementor drei Container, die ineinander geschachtelt sind:

Äußerer Container
1. Auf volle Breite stellen
2. Mindesthöhe von 300vh einstellen (bei Bedarf Anpassen, je nach gewünschtem Scroll-Verhalten)
3. Eine HTML Komponente hinzufügen und den Javascript Code von oben einfügen
4. Folgende Klassen hinzufügen: initial und scroller
5. Padding auf 0px
Mittlerer Container – Klassen: initial und Sticky Top.
1. Die Klasse initial hinzufügen
2. Den Container als Sticky Oben festlegen und „In der Spalte bleiben“ auf ja stellen
3. Custom Css hinzufügen

				
					selector{
    overflow-x: hidden;
}

Innerer Container
1. Richtung des Inhalts auf horizontal stellen
2. Die Klassen horizontal-scroll und initial hinzufügen
3. Custom CSS hinzufügen

				
					selector {
    display: flex; 
    width: max-content; /* Passt die Breite an den Inhalt an */
    height: 100%; /* Füllt den Sticky-Bereich */
}

Innerhalb des inneren Containers kommen fünf horizontal angeordnete Container, die als „Slides“ fungieren. Diese haben die Klassen: slide und initial. Die Klasse initial sorgt dafür, dass alle Animationen zurückgesetzt werden und nichts mit dem GSAP-Code kollidiert. Füge diese Klasse ins Global Custom CSS deiner Website ein.

				
					/*initial CSS Transition*/
.initial{
    transition: initial;
}

2. Erklärung des Codes

Lass uns nun den Code Schritt für Schritt aufschlüsseln.

a) CDN-Links für GSAP und ScrollTrigger:

				
					<script data-minify="1" src="https://www.webamaze.de/wp-content/cache/min/1/ajax/libs/gsap/3.11.0/gsap.min.js?ver=1741816560" data-rocket-defer defer></script>
<script data-minify="1" src="https://www.webamaze.de/wp-content/cache/min/1/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js?ver=1741816560" data-rocket-defer defer></script>

Diese Links binden GSAP und ScrollTrigger in deine Website ein. Achte darauf, sie direkt unter dem <body>-Tag oder am Ende deiner Seite einzufügen.

b) DOMContentLoaded Event Listener:

				
					document.addEventListener("DOMContentLoaded", function() {

Dieser Event Listener stellt sicher, dass das Skript erst ausgeführt wird, nachdem das HTML geladen wurde.

c) Container auswählen und Breite berechnen:

				
					const horizontalScroll = document.querySelector('.horizontal-scroll');
const slides = document.querySelectorAll('.slide');
const totalScrollWidth = slides.length * window.innerWidth;

Hier wählen wir den horizontal-scroll-Container und die einzelnen Slides. Dann berechnen wir die Scrollbreite, die sich ergibt, indem wir die Anzahl der Slides mit der Fensterbreite multiplizieren.

d) GSAP-Animation erstellen:

				
					gsap.to(horizontalScroll, {
  x: -totalScrollWidth + window.innerWidth,
  ease: "none",
  force3D: true,

GSAP bewegt den horizontal-scroll Container nach links, sodass die Slides beim Scrollen erscheinen. Durch force3D: true wird GPU-Beschleunigung aktiviert.

e) ScrollTrigger-Setup:

				
					scrollTrigger: {
  trigger: ".scroller",
  start: "top top",
  end: "+=" + totalScrollWidth,
  scrub: 0.5
}

Hier liegt das Herzstück der Scroll-Animation:

trigger: .scroller aktiviert die Animation, wenn dieser Bereich in den Viewport scrollt.
start und end: Definieren, wann die Animation startet und endet. Startpunkt ist die obere Position des Viewports, während der Endpunkt durch die Gesamtbreite der Slides bestimmt wird.
scrub: Der Wert 0.5 gibt der Animation eine leichte Verzögerung und sorgt für sanfteres Scrollen.

Häufige Fehler und ihre Lösungen

Auch wenn der Code leicht zu integrieren ist, kann es manchmal zu Problemen kommen. Hier sind häufige Fehler und ihre schnellen Lösungen:

1. Animation funktioniert nicht oder ist ruckelig

Lösung: Stelle sicher, dass die Klassen exakt so benannt sind wie im Code (scroller, sticky-container, horizontal-scroll, slide, initial). Ruckelige Animationen können oft durch eine falsche scrub-Einstellung oder das Fehlen von force3D verursacht werden.

2. Sticky-Container bleibt nicht fixiert

Lösung: Überprüfe, ob in Elementor der mittlere Container wirklich auf „Sticky“ eingestellt ist. Manchmal erfordert diese Einstellung ein manuelles Zurücksetzen oder ein neues Anlegen des Containers, wenn sie nicht direkt greift.

3. Fehlerhafte Darstellung auf mobilen Geräten

Lösung: Erwäge, den Effekt nur auf Desktop zu aktivieren. Füge dazu eine Abfrage hinzu, um die Animation nur bei größeren Bildschirmen zu laden. Alternativ kannst du den Code für mobile Geräte deaktivieren.

4. Scrollen bleibt plötzlich hängen oder springt unkontrolliert

Lösung: Prüfe die pinSpacing-Option. Falls pinSpacing: false aktiviert ist, kann es zu einem „Sprung“ kommen, wenn andere Animationen oder Sticky-Elemente auf der Seite sind.

Ist end zu knapp gewählt, erreicht die Sektion vorzeitig das Ende der Animation, was zu einem Sprung führt. Experimentiere mit verschiedenen Werten.

Einbindung des Codes in Elementor

Widgets anpassen: Stelle sicher, dass die Klassen scroller, sticky-container, horizontal-scroll, slide, und initial genau so wie im Code beschrieben auf die Container angewendet sind.
Benutzerdefinierte CSS-Klassen hinzufügen: Die Klasse initial setzt alle Animationen zurück, was besonders hilfreich ist, wenn andere Elementor-Animationen auf der Seite laufen.
Code hinzufügen: Füge den JavaScript-Code über das HTML-Widget in den Abschnitt ein, in dem du den horizontalen Scroll-Effekt verwenden möchtest.

Fazit

Mit GSAP und ScrollTrigger kannst du eine neue Dimension in deine Elementor-Website bringen und Benutzerinteraktionen optimieren. Dieser horizontale Scroll-Effekt ist ein echter Hingucker und wertet dein Design erheblich auf. Nutze diesen Code als Grundlage, und experimentiere weiter mit GSAP und ScrollTrigger – deiner Kreativität sind keine Grenzen gesetzt!

Viel Freude beim Erstellen deines eigenes Scroll-Karusells.

Deborah Buehrle

Deborah Bührle bringt kreative Vision und technische Präzision zusammen, um strategisch durchdachte Weblösungen zu realisieren. Ihr Studium an der Technischen Universität München und der Universität Hohenheim hat ihr das Fundament gegeben, sowohl gestalterisch als auch technisch auf höchstem Niveau zu arbeiten. Mit mehreren Jahren Erfahrung in der Webdesign-Branche hat sie eine besondere Expertise im strategischen Aufbau von Websites entwickelt, die nicht nur durch ihr Design, sondern auch durch ihre Funktionalität überzeugen.