Create a cool typing animation for your portfolio
Tags: javascript, css, greensock, beginners
Published: 2020-01-18 19:10:55

---
title: Create a cool typing animation for your portfolio
published: true
description: How to create a cool typing animation that will be sure to impress!
tags: javascript, css, greensock, beginner
cover_image: https://thepracticaldev.s3.amazonaws.com/i/z37bwzduh48w3m1u5dk1.png
---

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](https://codepen.io/PaulRyan17/pen/ZEYqqdx) 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.
```html
<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.
```css
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`

```javascript
const tl = new TimelineMax()
```

Let's use our `tl` to create our animation.
```javascript
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.
![Typing Animation](https://i.gyazo.com/8750c97af476a673c2fe55e71189ef6b.gif)

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.
```javascript
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.
![Typing Animation](https://i.gyazo.com/6cfcb5bbc725216573a52532ed230e0c.gif)

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

[Here is a link to the complete pen.](https://codepen.io/PaulRyan17/pen/bGNmmjp)

------
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](https://instagram.com/paulryantipp) 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?