Jump to content
GreenSock

neontrenton

SplitText Stagger Animation Issue

Recommended Posts

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

Link to comment
Share on other sites

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 });
 });
  
})

 

  • Like 4
Link to comment
Share on other sites

That worked perfectly. Thank you!

  • Like 1
Link to comment
Share on other sites

Brilliant! 🥳

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×