Animated Typing Effect In Pure JavaScript – Typical

Preview:

Description:

Typical.js is a minimal, standalone JavaScript library to create an animated typing effect with support for deleting, pausing, waiting, looping, promise, and more.

Also provides a React wrapper that makes it simple to implement the library in the React app.

How to use it:

1. Install and import the Typical.

# Yarn
$ yarn add @camwiegert/typical
# NPM
$ npm install @camwiegert/typical --save

import { type } from '@camwiegert/typical';

2. Import the loop module if you need the infinite loop functionality.

import { type, type as loop } from '@camwiegert/typical';

3. Create a container in which you’d like to display the typing effect.

<div id="target"></div>

4. Initialize the Typical and define the text to type in the screen.

type(element, 'CSSSCRIPT.COM');

5. Append more content to the text, with a configurable delay.

type(element, 'CSSSCRIPT.COM', 2000, 'A JavaScript/CSS website.');

6. Loop the typing effect.

type(element, 'CSSSCRIPT.COM', 2000, 'A JavaScript/CSS website.', 1000, loop);

7. Pass a promise to the type method.

const init = type(target, 'Waiting...', 500);
type(target, init, 'CSSSCRIPT.COM', 500, 'A JavaScript/CSS website.', loop);

8. Pass a custom function to the type method.

const toggle = (element) =>
  element.classList.toggle('is-typing');
type(target, toggle, 'CSSSCRIPT.COM', toggle);

9. Add a blinking cursor to the end of the content while typing.

div::after {
  content: "|";
  -webkit-animation: blink 1s infinite step-start;
          animation: blink 1s infinite step-start;
}
@-webkit-keyframes blink {
  50% { opacity: 0; }
}
@keyframes blink {
  50% { opacity: 0; }
}