gsap + Split text, how to animate from last char to first

[_Greg _]

Hi!

How can i animate text from last character to first?

I can't find any demo about it.

Thank you!

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

[ZachSaucier]

Heye Nekiy2. First off, that demo is using an old version of GSAP. We highly recommend using GSAP 3. I updated the demos in the SplitText docs.

 

As for your question, you can just reverse the arrays before using them as the target. JS has a handy .reverse() method for that. For example:

mySplitText.split({type:"chars"}) 
mySplitText.chars.reverse();
splitTextTimeline.from(mySplitText.chars, {stagger: 0.1, ... });

 

[Carl]

Yeah, with GSAP 3 you have many more options for staggering.

 

Check out this video on the stagger object which lets you stagger from "end" and "center" 

 

 

animation.from(split.chars, {opacity:0, y:50, ease:"back(4)", stagger:{
		from:"end",
		each:0.05
	}})

Demo here:

See the Pen BajxopX by snorkltv (@snorkltv) on CodePen

 

 

[_Greg _]

Thank you, @ZachSaucier thats exactly what i want

Thank you, @Carl greate idea!

 

[GreenSock]

Insider tip: If you want to go from the end, you can actually just use a NEGATIVE stagger value