Jump to content


Using SplitText to animate from center out?

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



New to Greensock, but very much impressed with the tools - this stuff is truly incredible. 


I'm hoping to get some help with a text animation I am creating using SplitText. I would like to animate the text from the center of the sentence out (as seen in attached gif). Can anybody help point me in the right direction on this?


So far, I've been able to create a similar effect using:


'TweenMax.staggerFrom(mySplitText.chars, 0.6, {y:100, autoAlpha:0, ease: Circ.easeOut}, 0.05);'


However, that is not exactly the effect I am looking for. Is there anything inn particular I should be looking at to create this effect? Possibly leveraging TimelineMax for the animation timing functions?



See the Pen yNeGyY by DeCotii (@DeCotii) on CodePen

Link to comment
Share on other sites

Nice work, Diaco. Clever solution. I don't think I would have done it so elegantly.

Link to comment
Share on other sites

Very nice, Diaco! This is exactly what I was looking for.


You all rock, appreciate the timely response and elegant solution. Do you mind elaborating a bit on what this code is doing? Would love to learn about the details here. 

Link to comment
Share on other sites

  • 2 months later...

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.