When using GSAP SplitText with type: "lines", there is one important thing to keep in mind: your lines can change when the viewport changes. You need to have a fix so when users resize the browser window it doesn’t look broken.
How to fix GSAP SplitText lines on screen resize
A heading that is split into three lines on desktop might become five lines on mobile. The same thing can happen when a web font finishes loading and slightly changes the width of the text.
If your animation was created from the original split, it can quickly become out of sync.
The newer SplitText API makes this much easier with autoSplit.
SplitText.create(".title-reveal", {
type: "lines",
mask: "lines",
autoSplit: true,
onSplit(self) {
return gsap.from(self.lines, {
yPercent: 110,
rotationX: -25,
opacity: 0,
stagger: 0.08,
duration: 1,
ease: "power4.out",
scrollTrigger: {
trigger: ".title-reveal",
start: "top 80%"
}
});
}
});
With autoSplit: true, SplitText can recreate the lines when the element changes size or when fonts finish loading.
The important part is to create and return the animation inside onSplit().
That way, when SplitText needs to rebuild the lines, the previous animation is cleaned up and recreated against the new line structure.
For responsive sites, this is much safer than splitting the text once on page load and assuming the line breaks will never change.
That’s all, happy days