Elementor, GSAP, Animation
Wie du mit GSAP und Elementor eine Text Stagger Animation erstellst (SplitTextPlugin)
SHARE
SHARE
Füge ein Überschrift-Widget in den Container ein, in dem du den Text haben möchtest.
Füge im selben Container ein HTML-Widget hinzu. Das HTML-Widget muss das letzte Objekt im Container sein.
Füge den Text hinzu und ergänze einfach den GSAP-Code von unten.
Hinweis für Elementor-Nutzer:
In Elementor ist das Überschrift-Widget nicht einfach nur ein H1 oder H2 und so weiter. Es befindet sich immer in einem div, und deshalb ist es wichtig, dass du das H1 innerhalb des div ansprichst.
GSAP SplitText Widget ist jetzt kostenlos!
In der Vergangenheit hat GSAP Mitgliedschaften angeboten, um das SplitText-Plugin und viele andere Plugins nutzen zu können.
Seit Mai 2025 sind alle GSAP-Plugins jetzt kostenlos.
Das ist wirklich großartig! Denn das SplitText-Plugin wurde auch verbessert, sodass es noch besser responsive ist und auch gut für Barrierefreiheit.
In der Vergangenheit hatten viele Tutorials auf YouTube Workarounds für das Aufteilen von Text, zum Beispiel mit SplitType. Das ist jetzt nicht mehr nötig!
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
<script>
gsap.registerPlugin(SplitText);
let mm = gsap.matchMedia();
document.fonts.ready.then(() => {
gsap.set(".stagger h1", { opacity: 1 });
mm.add({
noMotion: "(prefers-reduced-motion: no-preference)",
reducedMotion: "(prefers-reduced-motion: reduce)"
}, (ctx) => {
const { noMotion, reducedMotion } = ctx.conditions;
if (noMotion) {
SplitText.create(".stagger h1", {
type: "chars,words",
mask: "chars",
onSplit(self) {
return gsap.from(self.chars, {
duration: 1,
yPercent: 100,
opacity: 0,
stagger: 0.01,
ease: "power3.out"
});
}
});
} else if (reducedMotion) {
document.querySelectorAll(".stagger h1").forEach(el => {
el.style.opacity = 1;
});
}
return () => {
// Cleanup falls nötig
};
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
document.fonts.ready.then(() => {
gsap.set(".staggerscroll h2", { opacity: 1 });
if (prefersReducedMotion) return;
document.querySelectorAll(".staggerscroll h2").forEach((el) => {
const split = SplitText.create(el, {
type: "chars,words",
linesClass: "chars,words",
autoSplit: true,
mask: "chars"
});
gsap.from(split.chars, {
duration: 1,
yPercent: 100,
opacity: 0,
stagger: 0.01,
ease: "power3.out",
scrollTrigger: {
trigger: el,
start: "top 80%",
toggleActions: "play none none none"
}
});
});
});
</script>
ich bin Sabine – Webdesignerin und WordPress-Expertin. Ich entwickle professionelle Websites, die technisch überzeugen und deine Business-Ziele unterstützen.
Damit du ohne Umwege zu deiner Website kommst, habe ich dir die 5 wichtigsten Tipps zusammengestellt. So sparst du wertvolle Zeit und Geld!
Besuche meinen Youtube Channel und entdecke interessante Tipps, wie du Animationen erstellst sowie weitere Tipps rund um Elementor und Webdesign.
…lies diese 5 Planungs-Tipps, die Selbständige & Coaches tausende Euro kosten
