Techniquereact-typed

Typed text animation

2020-12-16Chris Tham

This post is all about enabling a common animation to be found on websites, having letters appear on the page as it they are typed by a human on a keyboard.

hero

I installed react-typed which uses Typed.js as the underlying engine for animating typed text. I then made the component available over MDX.

Here are some examples:

<Typed strings={['Here you can find anything']} typeSpeed={40} />
<Typed
  strings={['Search for products', 'Search for categories', 'Search for brands']}
  typeSpeed={40}
  backSpeed={50}
  attr="placeholder"
  loop
>
  <input type="text" />
</Typed>

Subscribe to get updates to this site!

Like my articles? Enter your details and I will send you an email whenever the site has new content. I will not use your email for any other purpose.

Subscribe