Tiny Typing Animation Web Component – slm-typewriter

Category: Animation , Javascript , Text | February 3, 2022
Author:salemjs
Views Total:106 views
Official Page:Go to website
Last Update:February 3, 2022
License:MIT

Preview:

Tiny Typing Animation Web Component – slm-typewriter

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

You Might Be Interested In:


One thought on “Tiny Typing Animation Web Component – slm-typewriter

  1. RS

    How does one markup text within the “Text 1” etc. ? I.e. if i wanted one word to appear bold, or blue.

    Thank you.

    Reply

Leave a Reply