splittext Hide each letter simultaneously

[Gregor3637]

Hello.

I`m quite new to "SplitText Text Animation" in GS. I watched few of the tutorials and searched the web for some examples, but didnt find what I wanted.
Basically what I want is to hide each letter after certain time simultaneously.
I have attached a simple Codepen example that shows the effect I`m trying to get.  Yet I want to accomplish this effect for every letter/char in a word/sentence.
Is this possible ?

See the Pen YEZOGB by GregorII (@GregorII) on CodePen

[Carl]

SplitText is only going to take some text and wrap it in its own div.

 

if your additional text is

<div class="originalText"></div>

 

 

After split it will become

<div class="originalText">
  <div>h</div>
  <div>e</div>
  <div>l</div>
  <div>l</div>
  <div>o</div>
</div>

 

you would then have to loop through all those divs nest them in new DOM nodes to match your setup

 

<div class="container">
  <div class="title">R</div>
  <div class="black-box"></div>
</div>

 

Definitely possible with a little extra JavaScript. GSAP can certainly handle doing the animation.

 

Not sure if you started using SplitText at all. here is a very basic demo to get you started

 

See the Pen aVJRBg?editors=1010 by GreenSock (@GreenSock) on CodePen