Elementor, GSAP, Scrolltrigger

So erstellst du eine horzontale Scroll Animation in Elementor (Free and Pro)

Lerne, wie du eine fesselnde horizontale Scroll-Animation auf deiner Website mit Elementor Free oder Pro umsetzt – ganz ohne zusätzliche Plugins.

Horizontale Scrolling-Effekte können eine gewöhnliche Webseite in ein interaktives Storytelling-Erlebnis verwandeln. Ob Zeitstrahl, Portfolio oder Panorama – diese Technik verleiht deiner Website einen professionellen Touch. In dieser Anleitung zeige ich dir Schritt für Schritt, wie du den Horizontal-Scroll-Effekt mit Elementor umsetzt – sowohl mit der kostenlosen als auch mit der Pro-Version.

Grundstruktur verstehen

Der horizontale Scrolleffekt basiert auf einer bestimmten Container-Struktur:

Ein übergeordneter Scroll-Container
Ein Scroll-Content-Container
Einzelne Panel-Sektionen
Vertikale Container oben und unten
Diese hierarchische Struktur sorgt für saubere Übergänge und korrektes Animationsverhalten.

Scroll-Container einrichten

Der Haupt-Scroll-Container braucht spezifische Einstellungen für beste Performance:

100 % Breite
Minimale Höhe: 100vh
Keine Abstände (Gap = 0)
Überlauf (Overflow) versteckt
Eigene CSS-Klasse: scroll-container
Übergänge und Overscroll-Verhalten via CSS anpassen

Scroll-Content-Container konfigurieren

Der Scroll-Content-Container dient als Wrapper für deine horizontalen Panels:

100 % Breite
Automatische Höhe
Höhe: 100vh
Keine Ränder oder Innenabstände
Eigene CSS-Klasse: scroll-content
Umschaltung der Richtung: horizontal (Zeile) für Animation, vertikal (Spalte) für die Bearbeitung

Panel-Sektionen erstellen

Jedes horizontale Panel braucht folgende Einstellungen:

Breite: 100 %
Höhe: 100vh
Keine Abstände oder Ränder
Flex-Shrink: 0 (damit es nicht schrumpft)
Individuelles Styling für visuelle Unterscheidung

GSAP-Animation umsetzen

Die Animation basiert auf GSAP (GreenSock Animation Platform) mit ScrollTrigger:

HTML-Widget am Ende des Scroll-Content platzieren
Timeline mit anpassbarem scrub-Wert konfigurieren
Marker-Einstellungen für die Entwicklung aktivieren
Start- und Endpunkte für das Timing der Animation definieren
X-Verschiebung für flüssige Übergänge

Anpassungsmöglichkeiten

Das Setup bietet einige Optionen zur Feinabstimmung:

Marker im Entwicklungsmodus ein-/ausblenden
Delays für weichere Übergänge an Ecken einstellen

Technische Hinweise

Damit alles rund läuft, solltest du Folgendes beachten:

Alle Einstellungen müssen exakt gesetzt sein
Richtung des Containers richtig einstellen (Bearbeiten vs. Anzeigen)
CSS-Code-Platzierung unterscheidet sich bei Free und Pro

Weitere Animationen können innerhalb von ScrollTrigger integriert werden

Best Practices

Für optimale Performance:

Halter dich exakt an die Container-Einstellungen
Wechsle bei Bedarf zwischen horizontaler und vertikaler Ansicht
HTML-Widget korrekt platzieren
Marker vor dem Veröffentlichen deaktivieren

Fazit
Diese horizontale Scroll-Animation bringt richtig Power in deine Website! Zugegeben: Die Einrichtung braucht etwas Liebe zum Detail – aber das Ergebnis ist ein professionelles, flüssiges Scroll-Erlebnis, das die Nutzerbindung ordentlich pusht. Und das Beste: Du brauchst keine extra Plugins – egal, ob du Elementor Free oder Pro verwendest.

Dank der hohen Flexibilität eignet sich dieser Effekt perfekt für Storytelling, Produktpräsentationen oder kreative Portfolios – und bleibt dabei voll kompatibel mit beiden Elementor-Versionen.

GSAP Code

Place the HTML Widget as the last item in your Scroll Container and add this code there or in the Elementor Custom Code

Copy Code


<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);

  let container = document.querySelector(".scroll-content");
  let scrollContainer = document.querySelector(".scroll-container");

  // Timeline for horizontal scrolling and parallax effects
  let scrollTimeline = gsap.timeline({
    scrollTrigger: {
      trigger: scrollContainer,   // The element that will trigger the scroll animation
      pin: true,                  // Pins the element, making it fixed while scrolling
      scrub: 1,                   // Syncs the animation with the scroll position
      start: "top top",           // Animation starts when the top of scrollContainer meets the top of the viewport
      end: () => "+=" + container.scrollWidth,  // Sets the end point based on the width of the scroll-content
      markers: false,              // Optional, adds markers to visualize the start and end points for debugging
      invalidateOnRefresh: true   // Refreshes the end position on window resize for responsive adjustments
    }
  });

 // Add a small delay at the start (pause with no movement)
scrollTimeline.to(container, { x: 0, duration: 0.1 });

// Add Horizontal Scroll to Timeline
  scrollTimeline.to(container, {
    x: () => -(container.scrollWidth - window.innerWidth) + "px",
    ease: "none"
  });

// Add a small delay at the end
scrollTimeline.to(container, { x: () => -(container.scrollWidth - window.innerWidth) + "px", duration: 0.1 });
</script>

CSS Code

Copy Code


.scroll-container{
    transition: none;
    overscroll-behavior: none;
    display:flex !important; 
    width:100% !important;
    Height: 100vh !important;
    overflow: hidden !important; 
    margin: 0px !important; 
    padding: 0px !important;
}


.scroll-content{
    transition: none;
    overscroll-behavior: none;
    display:flex !important; 
    width: auto !important; 
    height: 100vh !important; 
  flex-wrap: nowrap !important; 
  gap: 0 !important; 
  flex-direction: row !important; 
  margin: 0 !important; 
  padding: 0 !important; 
}


.panel {
  display: flex !important; 
  width: 100vw !important; 
  height: 100vh !important; 
  flex-grow: 1 !important; 
  flex-shrink: 0 !important; 
  flex-basis: auto; 
  box-sizing: border-box !important; 
}

2. Code for the Elementor Free Version

Follow exactly the same steps for the setup instead of adding the CSS Codes from Above. The CSS Code will be in the following code in the Styles included. You can also add the CSS Code to your wordpress Custom CSS and add the GSAP Code in the HTML Widget.

Or just copy all the code below and this into the HTML widget.

Copy Code


<style>
   .scroll-container{
    transition: none;
    overscroll-behavior: none;
    display:flex !important; 
    width:100% !important;
    Height: 100vh !important;
    overflow: hidden !important; 
    margin: 0px !important; 
    padding: 0px !important;
}

.scroll-content{
    transition: none;
    overscroll-behavior: none;
    display:flex !important; 
    width: auto !important; 
    height: 100vh !important; 
   flex-wrap: nowrap !important; 
   gap: 0 !important; 
   flex-direction: row !important; 
   margin: 0 !important; 
   padding: 0 !important; 
}

.panel {
  display: flex !important; 
  width: 100vw !important; 
  height: 100vh !important; 
  flex-grow: 1 !important; 
  flex-shrink: 0 !important; 
  flex-basis: auto; 
  box-sizing: border-box !important; 
}

</style>


<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);

  let container = document.querySelector(".scroll-content");
  let scrollContainer = document.querySelector(".scroll-container");

  // Timeline for horizontal scrolling and parallax effects
  let scrollTimeline = gsap.timeline({
    scrollTrigger: {
      trigger: scrollContainer,   // The element that will trigger the scroll animation
      pin: true,                  // Pins the element, making it fixed while scrolling
      scrub: 1,                   // Syncs the animation with the scroll position
      start: "top top",           // Animation starts when the top of scrollContainer meets the top of the viewport
      end: () => "+=" + container.scrollWidth,  // Sets the end point based on the width of the scroll-content
      markers: true,              // Optional, adds markers to visualize the start and end points for debugging
      invalidateOnRefresh: true   // Refreshes the end position on window resize for responsive adjustments
    }
  });

 // Add a small delay at the start (pause with no movement)
scrollTimeline.to(container, { x: 0, duration: 0.1 });

// Hinzufügen des horizontalen Scrollens zur Timeline
  scrollTimeline.to(container, {
    x: () => -(container.scrollWidth - window.innerWidth) + "px",
    ease: "none"
  });

// Add a small delay at the end
scrollTimeline.to(container, { x: () => -(container.scrollWidth - window.innerWidth) + "px", duration: 0.1 });
</script>

So erstellst du eine horzontale Scroll Animation in Elementor (Free and Pro)

Lerne, wie du eine fesselnde horizontale Scroll-Animation auf deiner Website mit Elementor Free oder Pro umsetzt – ganz ohne zusätzliche Plugins.

Grundstruktur verstehen

Scroll-Container einrichten

Scroll-Content-Container konfigurieren

Panel-Sektionen erstellen

GSAP-Animation umsetzen

Anpassungsmöglichkeiten

Technische Hinweise

Best Practices

GSAP Code

CSS Code

2. Code for the Elementor Free Version

Top 5 Tipps für die Planung deiner Business Website!

Schnell, strukturiert, erfolgreich: So planst du deine Webseite für 2024, die nicht nur beeindruckt, sondern auch verkauft – ganz ohne Zeitverlust.