Implementing the keyboard/typing animation with React

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

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

Keyboard/Typing Animation

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

The corresponding JSX looks like this:

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

That’s it!

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