Jump to content
Search Community

Hide each letter simultaneously

Gregor3637 test
Moderator Tag

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


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

Link to comment
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


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





  • Like 5
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...