Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
_Greg _

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

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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

  • Like 4
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.
×