Jump to content
Search Community

Text animation in and out with SplitText

SebT test
Moderator Tag

Recommended Posts

Hi everyone, 


I’m discovering GreenSock animation framework, seems pretty powerful.
But I’m struggling reproducing the following text animation (that maybe some of you will find basic?) :

(by animation, I'm speaking about the very first text animation on black screen where text appears from the bottom by words, then disappears on the left by chars, then black background disappears by collapsing into 3 vertical bands)

Before asking for your help, I've done my research on the forum and I discovered the need to use SplitText add-on.
I've set up a first approach on this pen :

For the exit animation, how do I handle the "overflow hidden" wrapping of all chars to make them disappear when they move left ?
How should I start for the 3 vertical bands reveal animation ?


Thanks for your kind help, very much appreciated

See the Pen xxEXXgM by sebastienthiriet (@sebastienthiriet) on CodePen

Link to comment
Share on other sites

Hey SebT and welcome to the GreenSock forums. Good work on your approach thus far!


In the same way that you created two splits for each line in order to create the reveal effect, you'll need to create two splits for each letter for the hide effect. Make sure to create them in the opposite order of how they are nested, so inner character split then outer then inner line split then outer. Once you get things split as you need them, apply overflow hidden to both of the outer elements (for each line and character). The animation at that point should be pretty straightforward :) 

  • Like 4
Link to comment
Share on other sites

Thanks Zach for your answer.

Ok I see I’ll try to do that.


What is your opinion about the 3 bands background animation ?

Should I set up 3 vertical black background divs, then apply an animation on it : but what is the best way of doing it ?

Should I shrink their width ?

Should I move them to the left with an overflow hidden wrapper ?

I understand that each animation can be achieved in very different ways, but smooth performance may require to do it the right way... and I’m sure that there is some community background and knowledge on what is the most relevant way ?

Link to comment
Share on other sites

@mikel, @ZachSaucier,

thank you very much for your answers and your help.

I pushed a bit further the path initiated in my first pen and - and following scrupulously the advices of Zach - I've succeeded in making it work.
(at least for the text animation...)


See the Pen LYRzorw by sebastienthiriet (@sebastienthiriet) on CodePen


But have you an idea of what happen with the spaces between words that disappear ?
Isn't SplitText supposed to preserve spaces ?


I'll continue my work for the background animation and will post my result here for posterity.

  • Like 1
Link to comment
Share on other sites

Splitting with nested elements is a bit tricky, especially with blank spaces. But Jack updated the SplitText file to try and work better in these types of situations. See if the beta file works for you: https://assets.codepen.io/16327/SplitText3.min.js


We'll include it in the next version of GSAP which should released in the next week or so. Sign up for a Club GreenSock account today to start using it in your actual project.

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.
  • Create New...