Create a cool typing animation for your portfolio

#javascript #css #greensock #beginners

Many websites especially portfolios use a typing effect which looks very cool. It is a great way to introduce yourself on your website. This is surprisingly simple to do with the great Greensock library.

So let's get cracking, I've created this blank Codepen that just has the Greensock library as a dependency. I really recommend following along. I will include the full pen at the end of the post.

Let's do this sh*t

Let's create some text, the text I am going to use is Hello, my name is Paul Ryan so bang that into the HTML block in Codepen and put it between two p tags.

<p class="text-description type-me">Hi, my name is Paul Ryan</p>

We also gave it a class of type-me and text-description.

Let's add some styles to make our text look a little better.

body {
    display: flex;
    justify-content: center;
    font-family: Courier;
}

.text-description {
  width: 870px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 3.8em;
}

The width above is quite important as this is the amount we will animate up to when doing our JavaScript. I essentially just set the width to a value that matches the length of the text on one line. This will make more sense when we move onto the JavaScript section.

Let's add in our JavaScript, the first thing we do is create a new instance of TimelineMax

const tl = new TimelineMax()

Let's use our tl to create our animation.

tl.fromTo(".type-me", 5, {
  width: "0",
}, {
  width: "870px", /* same as text-description width*/
}, 0);

So the above just says target the class type-me and set its width to 0 and animate the width to 870px and set the duration to 5 seconds.

This gives the following.

This is ok but doesn't give us exactly what we want. What we need to do is use SteppedEase which is provided by Greensock which gives more of a stepping animation.

tl.fromTo(".type-me", 5, {
  width: "0",
}, {
  width: "870px", /* same as text-description width */
  ease:  SteppedEase.config(24)
}, 0);

We pass the config method of SteppedEase the value of 24 as that's how many characters is in our string.

This gives us the typing animation we want as shown below.

And voila that is how you create a typing effect/animation.

Here is a link to the complete pen.

I hope you enjoyed this post and it made things clearer for you. I often post what I am working on and content I am producing on my Instagram so be sure to give me a follow. I am trying to post more tech content on Instagram, anyone else fed up with pictures of the gym and food?

Top comments (3)

SJellen • Jan 18 '20

Here's a font to use with the typewriter

It crazy because I needed a typewriter effect 2 months ago but I couldnt find a good font. Last week I was looking for a form and I stumble on a typewriter font.