SplitText Stagger Animation Issue

[neontrenton]

Hello,

I'm trying to use SplitText and Scrolltrigger to do a staggered lettering animation like the one found here: 

 

However, if I use multiple instances of the #split-stagger, the first instance works perfectly but the rest animate way too dramatically. The letters in the #split-stagger text (other than the first instance) move down the page a lot more than they should. Is there some adjustment I can make to make these all animate properly and independently of one another? 

 

gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText);

 

const smoother = ScrollSmoother.create({

wrapper: "#smoother-wrapper",

content: "#smoother-content",

smooth: 2,

normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies

ignoreMobileResize: true, // skips ScrollTrigger.refresh() on mobile resizes from address bar showing/hiding

effects: true,

preventDefault: true,

});

 

smoother.effects("img", { speed: "auto" });

 

let tl = gsap.timeline();

let mySplitText = new SplitText(".split-stagger", { type: "words,chars" });

let chars = mySplitText.chars;

 

chars.forEach((char, i) => {

smoother.effects(char, { speed: 1, lag: (i + 1) * 0.1 });

});

 

See the Pen bGaWjpw by GreenSock (@GreenSock) on CodePen

[Cassie]

Hey there!

 

You'd need to loop around the text items and do the splitText and animation for each one

Something like this...

 

let textItems = gsap.utils.toArray('.text');

textItems.forEach((scopedText) => {
//split the text and get the characters in that specific text block
 let mySplitText = new SplitText(scopedText, { type: "words,chars" });
 let chars = mySplitText.chars;
// then loop around the characters
 chars.forEach((char, i) => {
  smoother.effects(char, { speed: 1, lag: (i + 1) * 0.1 });
 });
  
})

 

[neontrenton]

That worked perfectly. Thank you!

[Cassie]

Brilliant! 🥳