Typewriter

A webcomponent that animates typing like a typewriter.

Usage:

<script src="typewriter.min.js" type="module"></script>
<type-writer>
    <p>Text I want to animate</p>
</type-writer>

HTML component properties

    this.height = this.getAttribute("height") || "max-content";
    this.width = this.getAttribute("width") || "20ch";
    this.fontSize = this.getAttribute("font-size") || "inherit";
    this.fontFamily = this.getAttribute("font") || "Futura";
    this.animationDuration = this.getAttribute("animation-duration").split(",").map(s => Number(s.trim())) || [5];
    this.sentenceDelay = this.getAttribute("sentence-delay").split(",").map(s => Number(s.trim())) || [1];
    console.log(this.sentenceDelay);
    this.initialDelay = Number(this.getAttribute("initial-delay")) || 0.5;
    this.clearBetweenParagraphs = Boolean(this.getAttribute("clear-paragraphs")) || false;
    this.stopBlinkingAfter = Boolean(this.getAttribute("stop-blink")) || false;

CSS Shadow Root properties

    this.shadowRoot.host.style.setProperty("--ff", this.fontFamily);
    this.shadowRoot.host.style.setProperty("--fs", this.fontSize);
    this.shadowRoot.host.style.setProperty("--h", this.height);
    this.shadowRoot.host.style.setProperty("--w", this.width);
```;