Tiny Typing Animation Web Component – slm-typewriter

Preview:

Description:

An ultra-light (~1kb) web component for creating text typing & deleting animations.

Built with Custom Element. Requires no dependencies. All options can be passed via HTML data attribute.

How to use it:

1. Import the slm-typewriter’s JavaScript and CSS.

<script src="slm-typewriter.min.js"></script>
<link rel="stylesheet" href="slm-typewriter.min.css" />

2. Add the <slm-typewriter /> web component to the page and define the text to be printed character by character.

<slm-typewriter slm-items='["Text 1", "Text 2", "Text 3"]' />

3. Determine whether or not to loop the animation.

<slm-typewriter slm-loop="" slm-items='["Text 1", "Text 2", "Text 3"]' />

4. Config the delay in milliseconds.

<slm-typewriter 
  slm-on-start="1500" 
  slm-on-typing="120"
  slm-on-complete="2000"
  slm-on-finish="1500"
  slm-items='["Text 1", "Text 2", "Text 3"]' />

Changelog:

v1.1.2 (02/03/2022)

• update