Text Typing / Deleting Animations In Native JavaScript – Native Typed

Preview:

Description:

Native Typed is a zero-dependency JavaScript library used to generatetext typing / deleting animation mimicking human typing behavior.

Supports loop mode which enables you to generate a text rotator for looping through an array of text you specify.

How to use it:

Install the Native Typed via NPM:

npm install native-typed --save

Or directly include the JavaScript file in your document.

<script src="dist/native-typed.js"></script>

Define an array of text you want to print in the container ‘#demo’.

<div id="demo"></div>

new NTyped(document.querySelector('#demo'), {
    strings: ['JavaScript', 'CSS And CSS3', 'HTML5'],
});

Config the animation with the following settings.

new NTyped(document.querySelector('#demo'), {

    strings: ['This is a typing animation!', 'You can also add your own sentences', 'So go do it!'],

    // show cursor
    showCursor: true,
    cursorChar: '|',

    // infinite loop
    loop: true,

    // animation options
    startDelay: 500,
    backDelay: 500,
    typeSpeed: 0,
    deleteSpeed: 0,

    // CSS classes
    classes: {
      cursor: 'title__cursor'
    }
    
});