Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
celli

SplitText starting from center

Recommended Posts

Is there a trick to starting GSAP splitText from the center ? The text is centered, but it seems to start/stagger from the left. I was trying a stepped ease, and changing the width of my text element's div, but I couldn't seem to get it right.

See the Pen eYmGYZQ by celli (@celli) on CodePen

Share this post


Link to post
Share on other sites

Yes, Use the object-based syntax for the stagger and set the from value to "center".

 

You can change your code to:

 

HeroTL.from(chars, {duration: 0.1, opacity:0, ease: "Sine.InOut", stagger:{from:"center", each:0.03}}, "+=0");

for more advanced timing control check out:

 

  • Like 3

Share this post


Link to post
Share on other sites

That's really cool, Carl! I am watching the video now.

 

But I still want the first letter to appear first, like the way a regular text box works when you type using centered text in photoshop or illustrator. The first letter still starts out the sequence... Can I still use something like these advanced staggers work ?

Share this post


Link to post
Share on other sites
11 minutes ago, celli said:

I still want the first letter to appear first, like the way a regular text box works when you type using centered text in photoshop or illustrator. The first letter still starts out the sequence... Can I still use something like these advanced staggers work ?

If you still want it to start with the first letter, what do you mean "starting GSAP splitText from the center"? Maybe a diagram or something would help our understanding.

Share this post


Link to post
Share on other sites

Hi Zach, Sorry about that! Here is a quick animated GIF to show what I mean

animG.gif

Share this post


Link to post
Share on other sites

ahh, I didn't think of that. That's awesome! So there is only one letter at a time before staggering.

Share this post


Link to post
Share on other sites

Cool, thanks Carl and Zach!

Share this post


Link to post
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.

×