Typewriter effect generator

Make a typewriter effect

Pick a way to type, write your text (one phrase per line), set the speeds and the caret, and watch the preview: it runs the code below, written from the same settings with only what differs from each one’s defaults.

/* Made with https://svg-scroll-draw.vercel.app/typewriter-effect-generator */
/* One line in a monospace font, where every letter is 1ch wide: the 25
   letters of “Hello, I am a typewriter.” are 25ch, and steps(25) uncovers one at a time. */
.typewriter {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Up to 2rem, and small enough for all 25 letters to fit 90% of the screen
     (a monospace letter is about 0.6em wide). */
  font-size: min(2rem, 6vw);
  line-height: 1.2;
  letter-spacing: 0;
  width: 25ch;
  box-sizing: content-box;
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.08em solid;
  animation:
    typing 4.9s steps(25) infinite,
    caret 1s step-end infinite;
}

/* 2s typing, 1.5s held, 1s deleting, 0.4s blank: 4.9s in all. */
@keyframes typing {
  0% { width: 0; }
  40.82%, 71.43% { width: 25ch; }
  91.84%, 100% { width: 0; }
}

@keyframes caret {
  50% { border-right-color: transparent; }
}

/* Less motion asked for: the whole line, still. */
@media (prefers-reduced-motion: reduce) {
  .typewriter {
    animation: none;
  }
}

Three ways to type, and when each fits

They look alike for a second and part company after that. CSS is the lightest and the most limited; scrollText ties the typing to the reader’s scroll instead of a clock; the typer is the only one that can change what it types.

How the CSS typewriter works

Three properties do the work. white-space: nowrap keeps the text on one line, overflow: hidden hides whatever is past the box’s right edge, and the width, animated from 0 to the text’s length, decides how much shows. In a monospace font every character is the same width, 1ch, so 25 characters are exactly 25ch, and steps(25) takes the width there in 25 jumps of 1ch: one whole letter each (fig. 1).

/* One line in a monospace font, where every letter is 1ch wide: the 25
   letters of “Hello, I am a typewriter.” are 25ch, and steps(25) uncovers one at a time. */
.typewriter {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Up to 2rem, and small enough for all 25 letters to fit 90% of the screen
     (a monospace letter is about 0.6em wide). */
  font-size: min(2rem, 6vw);
  line-height: 1.2;
  letter-spacing: 0;
  width: 25ch;
  box-sizing: content-box;
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.08em solid;
  animation:
    typing 2s steps(25) both,
    caret 1s step-end 2s infinite;
}

@keyframes typing {
  from { width: 0; }
}

@keyframes caret {
  50% { border-right-color: transparent; }
}

/* Less motion asked for: the whole line, still. */
@media (prefers-reduced-motion: reduce) {
  .typewriter {
    animation: none;
  }
}

steps(N) on its own means steps(N, end): each jump comes at the end of its step, so the first letter shows one letter’s time after the start and the last at the very end. The caret is the element’s own right border, and overflow: hidden clips what is inside the border, never the border, so it rides along at the edge of the text. A second animation blinks it, with step-end timing so it switches instead of fading. On a loop, one @keyframes rule holds the whole cycle, typing, holding, deleting and a blank, and the step timing applies to each stretch between two keyframes.

Typing as the reader scrolls

scrollText’s progress runs from 0, when the text’s top reaches 85% of the way down the window, to 1, when it reaches 40%: its default trigger. With split: 'chars' every character but a space is a piece of its own, and each piece takes its own share of that progress, starting stagger × its place in line of the way through. With stagger at 1 ÷ the number of letters, the shares run one after another and never overlap, so letter i begins as progress passes i ÷ letters. The easing (t) => (t > 0 ? 1 : 0) turns each share into a switch, hidden until it begins and whole after, and from: { opacity: 0 } only fades, where the default would also move each letter 24px.

import { scrollText } from 'svg-scroll-draw/text';

const el = document.querySelector('.typed');

// One letter after another: scrollText makes a piece of every character but
// the spaces, and each piece gets 1 ÷ that many of the scroll.
const letters = el.textContent.split('').filter((c) => c !== ' ').length;

scrollText(el, {
  split: 'chars',
  stagger: 1 / letters,
  easing: (t) => (t > 0 ? 1 : 0), // each letter whole, as its share begins
  from: { opacity: 0 },
});

followCaret(el);

/** Keeps .is-caret on the last letter shown, or on the element while none is. */
function followCaret(el) {
  const place = () => {
    let last = null;
    for (const child of el.children) if (Number(child.style.opacity) > 0) last = child;
    for (const old of el.querySelectorAll('.is-caret')) old.classList.remove('is-caret');
    el.classList.toggle('is-caret', !last);
    last?.classList.add('is-caret');
  };
  // Each time scrollText changes a letter's opacity.
  const watch = new MutationObserver(place);
  watch.observe(el, { attributes: true, attributeFilter: ['style'], subtree: true });
  place();
  return () => watch.disconnect();
}

Typing that everyone can read

Read once, in full, from the start. A screen reader should hear the sentence, not letters arriving. Each way here keeps the whole text in the page from the first moment: the CSS version only clips its line, so the text is all there; scrollText hides its letters with aria-hidden and adds one visually hidden copy of the whole text; and the typer writes into an aria-hidden span beside a hidden copy of every phrase. None of them is a live region (aria-live), the one thing that would make a screen reader announce each change.

A hidden copy, not an aria-label. ARIA does not allow aria-label on a <p>, a <span> or a <div>, and a screen reader may skip it there; with every letter hidden it would then read nothing. scrollText uses a hidden copy for that reason, and so does the typer. More on splitting text a screen reader can read.

Less motion. Readers who ask their system for reduced motion see the text whole and still. The CSS turns its animations off under prefers-reduced-motion; scrollText shows every letter at once, and switches to that if the setting is turned on during a visit; the typer shows every phrase. The caret stops blinking.

Five seconds. WCAG 2.2.2, Pause, Stop, Hide, asks that anything moving or blinking by itself for more than five seconds, beside other content, can be paused, stopped or hidden. A typer on a loop never stops, and a caret that blinks for ever counts as well. Type once instead (with the generator’s default text and speeds the typer is done after 12.72s), or wire the function typewriter() returns, which stops it, to a pause button, and choose a steady caret.

Use it in your project

npm i svg-scroll-draw

Typewriter effect questions

The rest of svg-scroll-draw 2.23.7: the docs, the text animation generator for words and letters that move, and the text fill on scroll generator.