SEO Friendly Type Animation

Prerequisites

anime.js

Example

You can find an example here: https://jaivinwylde.github.io/seo-friendly-typed-animation/

How To Use

Write HTML like this:

<h1>This is <span class="type" data-words="a test., an experiment., a trial., an exercise.">a test.</span></h1>

The words in the data-words attribute will be what is typed out in the animation. You can make the actual text of the tag something important for your SEO.

Styling

You can style the type class's ::after pseudo element to change the look of the cursor. You can also edit the timing variables and easing function in the javascript.