README.md

A JS module for typing animations.

✔️ Simple interface

✔️ Highly customizable

✔️ Lightweight (6kb min)

✔️ Dependency-free

Live Demo

For a production demo see my website: www.pbr.plus

Getting started is as easy as:

// in your *.js file
new Typedtext({
    content: [{text: "This is Typedtext.js!"}]
})
.run();

<!-- in your *.html -->
<div>
  <span id="sentence"></span><span id="cursor"></span>
  <!-- element id's can optionally be changed in config -->
</div>

This is also Typedtext.js:

Integration

Download the latest Typedtext.js file from the Releases section here: https://github.com/Criomby/typedtext.js/releases

In your .html file:

<script src="typedtext.js"></script>

Documentation

"How-to" Examples

▫️ basic setup

Basic custom configuration setup example

new Typedtext({
    elementSentenceId: "your-sentence-element",
    elementCursorId: "your-cursor-element",
    content: [{text: "This runs infinitely at creation."}],
    textColor: "red"
})
.run();

▫️ manual start/stop

Start / stop the animation loop manually (e.g. using a button click event)

var tt1 = new Typedtext({
    elementSentenceId: "your-sentence-element",
    elementCursorId: "your-cursor-element",
    content: [{text: "If you see this the animation runs."}],
    textColor: "green"
})
// currently shows blinking cursor only

// start animation loop
tt1.run();

// stop animation (completes current typing-delete cycle and stops after delete)
tt1.stop();

// blinkig cursor...

▫️ type, delete (one time)

Type / delete content just once

// config
var tt2 = new Typedtext({
    elementSentenceId: "your-sentence-element-2",
    elementCursorId: "your-cursor-element-2",
    textColor: "green"
})

// type text
tt2.type({
    text: "I am going to sit here."
});
// shows text permanently now

// delete text
tt2.delete();

// blinkig cursor...

// repeat as necessary
tt2.type({
    text: "New text typed."
});

// ... 
// tt2.delete(); 
// you get the idea

▫️ Get object status

See if animation is running currently on an object

var running = tt1.isRunning(); // returns boolean value

running is either `true or false depending on whether .run() has been called yet (or has been stopped w/ .stop())

▫️ configure all possible options

Create your ultimate custom config

// Ultimate Custom Config of Typedtext (ucctt)
var ucctt = new Typedtext({
    elementSentenceId: "sentElm",
    elementCursorId: "cursElm",
    cursor: "█",
    cursorColor: "black",
    textColor: "black",
    permaBlink: false,
    staticCursor: true,
    blinkSpeed: 0.5,
    content: [
        {
            text: "This is Typedtext.js!",
            color: "#ADA2FF",
            cursor: ";",
            cursorColor: "purple",
            timeout: 2000
        },
        {
            text: "Keep it running...",
            color: "black",
            cursor: "X",
            cursorColor: "#82AAE3",
            timeout: 2000
        },
        {
            text: "Another one...",
            color: "#DC0000",
            cursor: "I",
            cursorColor: "#850000",
            timeout: 2000
        }
    ],
    delay: 150,
    delayAfter: 2000,
    deleteSpeed: 50,
    printConfig: true,
    varSpeed: true,
    varSpeedPercentage: 0.6,
    typos: true,
    typosProb: 0.15,
    typosDelayMultiplier: 4,
    underline: false,
    selectable: false
});

// ucctt.run();

Config Options Docu:

(The values seen here are the default values if not overwritten by user config)

{
    /**
     * @property {string} elementSentenceId: ID of element where the content will be typed
     */
    elementSentenceId: "sentence",

    /**
     * @property {string} elementCursorId: ID of element where the cursor will be shown
     */
    elementCursorId: "cursor",

    /**
     * @property {string} cursor: character used as cursor
     */
    cursor: "|",

    /**
     * @property {string} cursorColor: default cursor color
     */
    cursorColor: "black",

    /**
     * @property {string} textColor: set global text color for content
     */
    textColor: "black",

    /**
     * @property {boolean} permaBlink: true: cursor blinks, even when typing
     */
    permaBlink: false,

    /**
     * @property {boolean} staticCursor: true: cursor does not blink at any time
     */
    staticCursor: false,

    /**
     * @property {number} blinkSpeed: time interval cursor blinking in seconds
     */
    blinkSpeed: 0.6,

    /**
     * @property {array} content: array containing typeof contentObj (see below) with content to be typed and the respective options
     */
    content: [
        {
            text: "This is Typedtext.js!", // required
            color: "black", // optional: font color
            cursor: "|", // optional: cursor for individual word
            cursorColor: "blue", // optional: cursor color for word
            timeout: 2000 // optional: (additional to delayAfter) timeout after word has been typed
        },
        // add as many more as you like!
    ],

    /**
     * @property {number} delay in ms between chars typed
     */
    delay: 100,

    /**
     * @property {number} delayAfter: delay in ms after a content object has been typed / deleted and before it is deleted / the next is typed
     */
    delayAfter: 1500,

    /**
     * @property {number} deleteSpeed: delete speed of single chars in ms
     */
    deleteSpeed: 100,

    /**
     * @property {boolean} printConfig: prints config to console
     */
    printConfig: false,

    /**
     * @property {boolean} varSpeed: varies typing speed between chars by +-60ms so typing looks more natural instead of linear speed
     */
    varSpeed: false,

    /**
     * @property {number} varSpeedPercentage: 0% - 100% by how much typing speed varies (how much "delay" varies)
     */
    varSpeedPercentage: 0.5,

    /**
     * @property {boolean} typos: makes typos while typing as per the defined probability
     */
    typos: false,

    /**
     * @property {number} typosProb: Probability in percent for a typo per char
     */
    typosProb: 0.1,

    /**
     * @property {number} typosDelayMultiplier: How much larger the delay is after the typo has been made and until it gets corected
     */
    typosDelayMultiplier: 3.5,

    /**
     * @property {boolean} underline typed text
     */
    underline: false,

    /**
     * @property {boolean} selectable: target html elements are text selectable / highlightable
     */
    selectable: true
}

Support

If you use this project in production, please consider supporting the development.