Implementing the keyboard/typing animation with React

I’ve been seeing this animation on a bunch of landing pages:

• https://tip.cc/
• https://tryroll.com/
• https://devslopes.com/
• https://www.getcredo.com/
• https://reedsy.com/

I also recently implemented it for https://learnwith.io/. Let’s see how to build it (it’s pretty simple).

Keyboard/Typing Animation

Here’s the code I used for https://learnwith.io/.

Let’s break this down. It might look long, but it’s simple.

First, deleteName is called. This function calls setInterval with a function that does the following:

• If the current name is not empty, it slices the last character off.
• If the current name is empty, it clears the deletion interval, and calls addName after 1 second (the delay makes it so that a new name doesn’t get added right away).

The interval created by addName does the following:

• If the current name is not completed, it adds the next character.
• If the current name is completed, it clears the addition interval, and calls deleteName after 1 second (the delay makes it so that the name doesn’t get deleted right away).

Note that names get deleted faster than they get added. This makes for a nicer UI.

Blinking Cursor Animation

So, I actually just stole this from https://linktree.com/ since I think their animation looks good. Here’s the code:

The corresponding JSX looks like this:

<div className={joinClasses(styles.blink, styles.cursor)} />

That’s it!

Let me know if you have any questions. As a small bonus for getting this far, here are a couple websites that use a similar animation:

• https://www.crowdspring.com/
• https://youteam.io/

I feel like there should be a better name for animations like this (if one exists please lmk :P)