Gregor3637

Hide each letter simultaneously

Recommended Posts

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 ?

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

 

 

 

 

 

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