Hide each letter simultaneously

Recommended Posts


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 ?

Share this post

Link to post
Share on other sites

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">


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>


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






  • Like 5

Share this post

Link to post
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.