Ledtobias

Typewriter-Effect from center using Splittext

Recommended Posts

Hello,

 

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

 

Thanks,

Tobias

Share this post


Link to post
Share on other sites

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.

 

 

And this example:

 

 

It uses the GSAP SteppedEase ease

 

http://greensock.com/docs/#/HTML5/Easing/SteppedEase/

 

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

Share this post


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

Share this post


Link to post
Share on other sites

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.

 

 

Happy tweening.

:)

 

  • Like 1

Share this post


Link to post
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">
    <li>
      <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.
      </p>
	</li>
	<li><img src="img/icon15.png" width="50px"></li>
	</ul>
</div>


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

Share this post


Link to post
Share on other sites

Yeah, if you're using @Jonathan's technique from above, you can add a <br>.

 

 

  • Like 3

Share this post


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

 

Share this post


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

Share this post


Link to post
Share on other sites

Hi guys,

 

Just for the fun:

 

 

Happy tweening ...

Mikel

 

 

Share this post


Link to post
Share on other sites

Hi again @FilGapper Niraj

 

After looking at it you would be better off using my second example like PointC posted above.

 

This is because my first example 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.

 

Whereas my second example 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

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.