Text animation in and out with SplitText

[SebT 1 Likes (Newbie)]

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?) :
https://www.buildinamsterdam.com

(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

[ZachSaucier 7,162 Likes (Superhero)]

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  

[SebT 1 Likes (Newbie)]

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 ?

[SebT 1 Likes (Newbie)]

Hi again Zach,

 

here is my new pen following your suggestions :

 

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

 

Does not work unfortunately... yet

By the way, by splitting by char, I lost spaces between words...

 

[mikel 4,782 Likes (Superhero)]

Hey @SebT,

 

Just another concept

 

See the Pen oNzovKX?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[ZachSaucier 7,162 Likes (Superhero)]

5 hours ago, SebT said:

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

That sounds like the best approach to me  

 

If you have a specific question about GSAP please let us know and we'll do our best to help out.

[SebT 1 Likes (Newbie)]

@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.
 

[ZachSaucier 7,162 Likes (Superhero)]

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.