DEV Community

Cover image for Create a cool typing animation for your portfolio
Paul Ryan
Paul Ryan

Posted on

43 9

Create a cool typing animation for your portfolio

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

Let's use our tl to create our animation.

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

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

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); 
Enter fullscreen mode Exit fullscreen mode

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

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?

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (3)

Collapse
 
kriyo profile image
Chris Kennedy

A perfect terse example of using Greensock!

Collapse
 
paulryan7 profile image
Paul Ryan

Ah cool. Definitely looks better than Courier

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay