How to create a typing animation on a text element

I recently implemented a typing effect on a piece of text here on Algobook, and I thought it was that awesome that I needed to share it with you guys. So in this tutorial, we will create our own typing effect animation and apply it to a text using css and react.

Final result

When we are done, this is how it will look.

Create our project

Let's create our project, if you haven't already :)

npx create-react-app typing-effect --template typescript

Setup our App.tsx

Let's remove the default code, and add this in our App.tsx file

import "./App.css";

function App() {
  return (
    <div className="App">
      <span className="text">This is the text that will animate</span>
    </div>
  );
}

export default App;

And now, let's give it some styling as well. In our App.css add following code.

.App {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem;
}

.text {
  overflow: hidden;
  white-space: nowrap;
  color: #104b72;
  animation: typing 2s steps(50, end), cursor 0.75s infinite;
  padding-right: 0.25rem;

  border-right: 0.15em solid #104b72;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 235px;
  }
}

@keyframes cursor {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #104b72;
  }
}

Some notes

• overflow: hidden is because we want to hide the text until animation is done

• white-space: no-wrap is to keep the text on one line

• border-right will act as our cursor

• In our typing animation, we set the end width to 235px. Adjust this based on the length of your text to get correct animation effect.

Outro

That's it for this guide on getting a typing effect on a text in React using only css.

I hope you enjoyed this guide, and thanks for reading.

All the best,