celli Posted December 30, 2019 Share Posted December 30, 2019 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 Link to comment Share on other sites More sharing options...
Carl Posted December 30, 2019 Share Posted December 30, 2019 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: 3 Link to comment Share on other sites More sharing options...
celli Posted December 30, 2019 Author Share Posted December 30, 2019 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 ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 30, 2019 Share Posted December 30, 2019 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. Link to comment Share on other sites More sharing options...
celli Posted December 30, 2019 Author Share Posted December 30, 2019 Hi Zach, Sorry about that! Here is a quick animated GIF to show what I mean Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 30, 2019 Share Posted December 30, 2019 Ah, I see. It'd be easiest to just add display: "none" in your from tween: See the Pen zYxEGop?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
celli Posted December 30, 2019 Author Share Posted December 30, 2019 ahh, I didn't think of that. That's awesome! So there is only one letter at a time before staggering. Link to comment Share on other sites More sharing options...
Carl Posted December 30, 2019 Share Posted December 30, 2019 if you don't need each letter to fade or do any animation you can just use the text plugin See the Pen mdyBJRZ?editors=1010 by snorkltv (@snorkltv) on CodePen 3 Link to comment Share on other sites More sharing options...
celli Posted December 30, 2019 Author Share Posted December 30, 2019 Cool, thanks Carl and Zach! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now