How to create a text stagger Animation (SplitTextPlugin)
SHARE
Elementor Setup
Add a heading widget in the Container you want to have the text.
Add in the same container an HTML widget. HTML widget must be the last object in the container.
Add the text and just add the GSAP code from below.
Note for Elementor users:
In Elementor the Heading widget is not just an H1 or an H2 and so on. It is always in a div and that’s why it’s important that you trigger
the H1 inside the div.
GSAP SplitText Widget is now free!
In the past GSAP has offered memberships in order to be able to use SplitText Plugin and also for many other plugins.
Since May 2025 all GSAP plugins are now free.
This is actually great! Because the SplitText plugin also got improved, so that it is even better responsive and also good for accessibility.
In the past many tutorials out on Youtube had workarounds for splitting the text using SplitType for example. Now this is not needed anymore!
GSAP Code
<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>
GSAP Code for Text Scroll Animation
<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>
