Warum Scroll-Animationen auf deiner Website?
Scroll-Animationen verleihen einer Website das gewisse Etwas: Sie sorgen für mehr Dynamik und ziehen die Aufmerksamkeit der Besucher*innen gezielt auf wichtige Inhalte. In diesem Tutorial zeige ich dir, wie du mit der Animations-Bibliothek GSAP und Elementor eine besondere Text-Scroll-Animation gestaltest. Wir kreieren eine Sticky-Sektion, in der große Überschriften beim Scrollen in der Mitte des Bildschirms erscheinen und sanft in die nächste Überschrift übergehen.
Was du brauchst
Für dieses Tutorial solltest du folgende Voraussetzungen mitbringen:
- Elementor Pro Builder Plugin: Mit Elementor Pro kannst du ab dem Advanced Solo Plan Custom-Code einfügen. Zum Plugin*
- Grundkenntnisse in JavaScript und CSS: Das macht es dir leichter, den Code zu implementieren und anzupassen.
Endergebnis: Das erwartet dich
Am Ende dieses Tutorials wird deine Webseite eine Sektion mit folgendem Effekt haben:
- Ein Textblock bleibt beim Scrollen als Sticky-Sektion in der Mitte des Bildschirms.
- Nacheinander erscheinen große Headlines in der Mitte und verschwinden dann, während die nächste erscheint.
- Es entsteht ein sanfter, fließender Wechsel der Headlines.
Schritt-für-Schritt-Anleitung
1. Schritt: Elementor Setup
- Container in Elementor erstellen: Öffne Elementor und füge zwei Container hinzu, indem du einen Container in den anderen einfügst. Beide Container sollten eine Mindesthöhe von 100vh haben.
- Sticky-Effekt für den inneren Container: Setze im Bereich „Bewegungseffekte“ den inneren Container auf „Sticky oben“, damit er beim Scrollen am oberen Rand des Bildschirms haftet.
- Überschriften und Text hinzufügen: Erstelle innerhalb des inneren Containers die Überschriften-Blöcke, die im Scroll-Effekt erscheinen sollen. Gib allen Überschriften eine absolute Position und platziere sie mittig im Container. Weise jeder Headline unter Eigenes CSS folgenden Code hinzu:
selector{
opacity: 0;
transition: opacity 0.5s ease;
}
- CSS-Klassen zuweisen: Weise den benötigten Elementen die passenden Klassen zu, um sie im JavaScript-Code ansteuern zu können:
- Äußerer Container: Gib dem äußeren Container die Klasse
.scroller - Headlines: Gib jeder Überschrift, die eingeblendet werden soll, die Klasse
.scrollerheadline
- Äußerer Container: Gib dem äußeren Container die Klasse
2. Schritt: Default Animationen der Container entfernen
Elementor wendet standardmäßig CSS-Animationen auf einige Elemente an. Um unerwünschte Interferenzen mit der Scroll-Animation zu vermeiden, habe ich im globalen Custom CSS eine Klasse .initial erstellt. Diese Klasse kann an beliebige Elemente angehängt werden, um alle CSS-Animationen zurückzusetzen. Ohne diesen Schritt können die vordefinierten Animationen von Elementor mit der Scroll-Animation kollidieren und unerwünschte Effekte verursachen.
- Setze diese CSS Klasse an beide Container in Elementor
/*initial CSS Transition*/
.initial{
transition: initial;
}
3. Schritt: GSAP und ScrollTrigger in Elementor laden
Damit GSAP und ScrollTrigger funktionieren, musst du die Links zu den Bibliotheken hinzufügen. Das geht über einen HTML-Block oder über die Custom Code Funktion in Elementor. Füge folgenden Code ein:
<script data-minify="1" src="https://www.webamaze.de/wp-content/cache/min/1/ajax/libs/gsap/3.12.5/gsap.min.js?ver=1737321026" 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=1737321026" data-rocket-defer defer></script>
4. Schritt: JavaScript-Code für die Text-Scroll-Animation
Füge in demselben HTML-Block den folgenden JavaScript-Code hinzu, um die Animation zu erstellen.
<script>
// Auswahl aller Headlines
const scrollerheadline = document.querySelectorAll('.scrollerheadline');
// Erstelle eine GSAP-Timeline mit ScrollTrigger
let timeline = gsap.timeline({
scrollTrigger: {
trigger: '.scroller', // Trigger
start: "top top", // Startpunkt: Sektion erreicht den Viewport
end: "+=250%", // Länge der Scroll-Animation
scrub: true, // Sanftes Scrubbing basierend auf dem Scrollen
pin: true, // Fixiert die Sektion während des Scrollens
pinSpacing: true, // Platz für die fixierte Sektion wird reserviert
anticipatePin: 1, // Übergänge beim Pinnen werden geglättet
}
});
// Anfangszustand: erste Headline sichtbar
gsap.set(scrollerheadline[0], { opacity: 1 });
// Schleife für die Animationen jeder scrollerheadline
scrollerheadline.forEach((headline, index) => {
// Zeige den Text sofort an (nur für die folgenden Texte)
if (index > 0) {
timeline.to(headline, {
opacity: 1, // Text sichtbar machen
duration: 0, // Sofortiger Wechsel
}, index * 1.5); // Zeitversatz für den Reihenfolgewechsel
}
// Verstecke den Text (außer den letzten Slide)
if (index < scrollerheadline.length - 1) {
timeline.to(headline, {
opacity: 0, // Text unsichtbar machen
duration: 0, // Sofortiger Wechsel
}, (index + 1) * 1.5); // Synchronisierung mit dem nächsten Text
}
});
// Fixiere die letzte Überschrift für einen Moment am Ende der Animation
timeline.to(scrollerheadline[scrollerheadline.length - 1], {
opacity: 1, // Sicherstellen, dass die letzte Überschrift sichtbar bleibt
duration: 1 // Fixiert für eine Sekunde
});
</script>
Erklärung der Code-Details
- scrollTrigger Optionen: Diese Optionen bestimmen, wann die Animation beginnt und endet, basierend auf dem Scrollen.
startlegt den Startpunkt fest (hier oben im Viewport), undendbestimmt, wann die Animation ausläuft. - opacity für den Wechsel: Die Animation wird durch das Wechseln der
opacity-Eigenschaft gesteuert, sodass die Texte nacheinander erscheinen und verschwinden. Der erste Text ist am Anfang bereits sichtbar und der letzte Text verschwindet am Ende nicht wieder.
Anpassungen und Tests
Sobald der Code eingebunden ist, teste die Animation in verschiedenen Browsern und auf Mobilgeräten, um sicherzustellen, dass alles reibungslos funktioniert. Besonders der index * 1.5-Wert kann je nach Länge der Headlines und Scrolling-Geschwindigkeit angepasst werden, um die Übergänge geschmeidig zu gestalten.
Häufige Probleme und Lösungen
Der Umgang mit der GSAP-Bibliothek kann vor allem am Anfang etwas verwirrend sein und es ist einiges an Trial and Error notwendig, bis die Animation reibungslos funktioniert. Hier einige Tipps zu Fehlern, die bei mir häufiger auftreten:
- Falsche Klassenbezeichnungen: Kontrolliere, ob du die Klassen
.scrollerund.text-slidekorrekt vergeben hast. - JavaScript-Fehlermeldungen: Falls in der Entwicklerkonsole Fehler angezeigt werden, überprüfe den JavaScript-Code auf Tippfehler oder fehlende Elemente.
- ScrollTrigger-Einstellungen: Ein häufiges Problem tritt auf, wenn
endzu kurz oder zu lang eingestellt ist. Dies kann dazu führen, dass die Animation am Anfang oder Ende „springt“ oder nicht richtig funktioniert.- Warum das passiert: ScrollTrigger ist darauf ausgelegt, genau den Scrollbereich abzugleichen. Ist
endzu knapp gewählt, erreicht die Sektion vorzeitig das Ende der Animation, was zu einem Sprung führt. Experimentiere mit verschiedenen Werten wie+=250%oder+=300%, bis der Effekt geschmeidig wirkt.
- Warum das passiert: ScrollTrigger ist darauf ausgelegt, genau den Scrollbereich abzugleichen. Ist
Fazit: Text Scroll-Effekt mit GSAP und Elementor
GSAP bietet unzählige Möglichkeiten, um Websites lebendig zu gestalten und Inhalte kreativ zu animieren. Dieser Beitrag ist der erste meiner Reihe, in dem ich dir zeigen möchte, wie du coole Animationen, Scroll-Effekte und out-of-the-box Design Elemente mit Elementor umsetzen kannst. Elementor hat aktuell von Haus aus nur begrenzte Möglichkeiten zur Animation, aber mit ein bisschen Code haben wir unbegrenzte Möglichkeiten.
Viel Erfolg und Freude beim Umsetzen!
