Jump to content


Typewriter-Effect from center using Splittext

Go to solution Solved by Jonathan,

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 was wondering if there's a way to use greensocks Splittext to create a typewriter-effect starting from the center, so that the first character starts in the center an the whole sentence will move to both sides, like in the example on codepen below




See the Pen LbPNvK by jonathan (@jonathan) on CodePen

Link to comment
Share on other sites

  • Solution

Hello Ledtobias and welcome to the GreenSock forum!


Here is that same effect using the same HTML markup and CSS.. minus the CSS animation @keyframes, but animated with GSAP.


See the Pen LbPNvK by jonathan (@jonathan) on CodePen


And this example:


See the Pen avXdvw by jonathan (@jonathan) on CodePen


It uses the GSAP SteppedEase ease




With SplitText that would take some planning to make sure all the split div tags parent width is animated and centered via margin auto. Or by only animating the parents transform negative translateX (x property in GSAP) value on every animated step. while animating the width.


But there are many ways to use SplitText to accomplish this.


Keep in mind that example uses ems sometimes different browsers might render different due to inherited browser defined stylesheet. And since it's using a web font that might need you to declare other CSS properties for your font text so it looks consistent across all modern browsers.



  • Like 6
Link to comment
Share on other sites

Oh I see, well thank you very much Jonathan :-D this will help me a lot!

As a newbie here it's really exciting to see how many possibilities greensock offers.



Thanks :-D

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Hi @FilGapper Niraj :)


Welcome to the forum and thanks for joining Club GreenSock.


I'm not sure I understand what you mean by 'goes outside of the box'? Do you have a CodePen demo of what you're seeing?



This is from another thread, but here's another way of getting the same result with SplitText.


See the Pen rZYmBo by PointC (@PointC) on CodePen


Happy tweening.



  • Like 1
Link to comment
Share on other sites

No I don't  have codepen demo but I'll add the screenshot here.

<div class="chat-box float-right" id="cb-ic-2" >
  <ul class="chat-profile">
      <p class="title"><strong>Chatbotler</strong></p>
       <!-- anim-typewriter  is going outside the box -->
        <p class="question line-1 anim-typewriter" ">
          Your tracking number tells me that it's shipped.
	<li><img src="img/icon15.png" width="50px"></li>

I tried everything including box-sizing still it goes outside of box can we add <br> or new line?

Screenshot 2018-11-16 at 2.25.36 AM.png

Link to comment
Share on other sites

11 hours ago, PointC said:

Hi @PointC thank u so much for the help but i'm using Jonthan 1st approach and it's not working getting error everytime 


Link to comment
Share on other sites

Hi @FilGapper Niraj and welcome to the GreenSock Forum!


To better help you,  you should create a reduced codepen demo example. ;)


This way we can see your code live to help you achieve what your after, since it will be hard to go just by your html markup and not seeing it with css and js in a live editable environment to test your code properly.




Happy Tweening! :)

  • Like 1
Link to comment
Share on other sites

Hi again @FilGapper Niraj


After looking at it you would be better off using

See the Pen avXdvw by jonathan (@jonathan) on CodePen

like PointC posted above.


This is because

See the Pen LbPNvK by jonathan (@jonathan) on CodePen

animates the width of a paragraph to show each letter on each SteppedEase. So its basically showing a little bit of the <p> tag when each letter is revealed. That is a problem for multi-line sentence in one paragraph since width is being animated. Usually you can just add to your CSS white-space-normal so it wraps, but you would see both lines animate at the same time instead of one line at a time. So you would have to use maybe 2-3 <p> tags for each line of the sentence. And then trigger each paragraph line after the previous one is complete along with killing the blinking on that line that is complete. With each line having their own tweens or timeline.



See the Pen avXdvw by jonathan (@jonathan) on CodePen

is splitting that paragraph tag into <div> tags for each letter using GSAP SplitTextPlugin. Then animating the autoAlpha property (CSS properties: opacity and visibility) for each <div> tag. So adding a <br> tag like @PointC did above would be the quickest way to have it animate the typewriter effect on a 2nd line.


Happy Tweening!

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