Animated Typing Effect In Pure JavaScript – Typical

Category: Animation , Javascript | October 22, 2019
Author: camwiegert
Views Total: 79
Official Page: Go to website
Last Update: October 22, 2019
License: MIT

Preview:

Animated Typing Effect In Pure JavaScript – Typical

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; }
}

You Might Be Interested In:


Leave a Reply