Native Typed

A tiny dependency free JavaScript library javascript library for typing animation.

1.77 kB gzipped of minified version ⚡
Dependency-free 🎉

new NTyped(document.querySelector('#caption'), {
  strings: ['vue', 'react', 'angular'],
  typeSpeed: 30,
  deleteSpeed: 15,
  loop: true
});

Getting Started

Step 1: Install

Download the latest release or install with npm.

npm install native-typed --save

Step 2: Reference

If you linked native-typed directly in your HTML, you can use window.NTyped. If you're using a module bundler, you'll need to import it.

// CommonJS
let NTyped = require('native-typed');

// ES2015
import NTyped from 'native-typed';

Options

You can set options on native-typed during initialization.

// During initialize
new NTyped(document.querySelector('#caption'), {
  strings: ['vue', 'react', 'angular'],
  typeSpeed: 30,
  deleteSpeed: 15,
  loop: true
});

###options.strings The array of strings to display in typing animation.

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

###options.stringType Determines whether provides strings are using HTML or not. You can choose between NTyped.Types.HTML and NTyped.Types.TEXT.

Default: (enum) NTyped.Types.HTML

###options.loop Make animation loop.

Default: (boolean) true

###options.showCursor Show cursor.

Default: (boolean) true

###options.cursorChar If cursor is enabled through options, show this character.

Default: (string) |

###options.startDelay Time delay in milliseconds before typing writing animation starts initially.

Default: (int) 500

###options.backDelay Time delay in milliseconds before deleting characters after typing them out.

Default: (int) 500

###options.typeSpeed The speed of typing characters in milliseconds.

Default: (int) 0

###options.deleteSpeed The speed of deleting characters in milliseconds.

Default: (int) 0

###options.classes.cursor Classname for cursor element.

Default: (sring) title__cursor

To have the cursor effect, please add following CSS to your stylesheet.
.title__cursor {
   opacity: 1;
   animation: blink 750ms infinite;
}

@keyframes blink {
   0%   { opacity: 1; }
   50%  { opacity: 0; }
   100% { opacity: 1; }
}

Polyfill

The library uses Object.assign and Object.entries that you might need polyfill for. You can for instance use babel-polyfill in this case.

Contributions & Issues

Contributions are welcome. Please clearly explain the purpose of the PR and follow the current style.

Issues can be resolved quickest if they are descriptive and include both a reduced test case and a set of steps to reproduce.

Licence

Extra

Inspired by: Typed.js

genert/native-typed