Chapter 182: SplitTextAnimator — Responsive SplitText Inside a Timeline (Helper)

Core Idea

When a SplitText instance re-splits (e.g. via autoSplit on resize), any animation nested inside a Timeline that referenced the old split elements becomes stale. This helper wraps SplitText with an animate() method that automatically swaps a fresh animation into the same timeline position when a re-split happens, killing the old one.

Key Concepts

• SplitTextAnimator(target, config) takes the same config as SplitText.create() and forces autoSplit: true.
• Returns a SplitText-like object with an added .animate(callback) method — the callback receives the current split (self) and must return the GSAP animation to run; that returned animation is what gets added to your timeline.
• On every re-split, each previously registered animate() callback re-runs automatically, and its new returned animation replaces the old one at the same timeline position.

Code Examples

let split = SplitTextAnimator(target, { type: "words,lines", autoSplit: true });
let tl = gsap.timeline();
tl.add(split.animate((self) => gsap.to(self.words, { opacity: 1, stagger: 0.05 })));

• What it demonstrates: registering an animation factory once, so responsive re-splits keep the timeline in sync automatically.

Key Takeaways

1. Use this specifically when SplitText output is nested inside a Timeline and the page is responsive/resizable — plain SplitText alone doesn't handle timeline swap-in on re-split.

Connects To

• SplitText (autoSplit): the underlying feature that triggers re-splits this helper reacts to.
• Timeline (core): where the returned animations get placed.