Tiny JS Library For Animated Typing Effect – Typeme

Preview:

Description:

Typeme is a vanilla JavaScript library for creating an animated typing effect through an array of strings.

I’m sure you’ve seen this typewriter-like typing effect before and it’s trendy on the Web. This is because the typing animation is so realistic and makes viewers curious about what’s being typed or who we’re talking to.

The plugin is simple, lightweight, customizable, and comes with easy installation instructions. The plugin uses JavaScript animations which means it can be used on all modern browsers without any problems.

How to use it:

1. Download and load the Typeme library in the document.

<script src="src/typeme-min.js"></script>

2. Create an element to hold the text.

<div id="example">
  ...
</div>

3. Initialize the Typeme plugin and define an array of strings to be animated.

const instance = new TypeMe({
      elem: "#example",
      strings: ["String1", "String2", ...],
});

4. Start the Animated Typing Effect.

instance.start();

5. Config the Animated Typing Effect.

const instance = new TypeMe({
      elem: "#example",
      strings: ["String1", "String2", ...],
      properties: {
        typeSpeed: 70,
        backspaceSpeed: 20,
        pauseAfterFullstop: 500,
        loop: false, // infinite loop
        stopOnLastString: true,
        animationStartDelay: 750,
        typeStartDelay: 500,
        backspaceStartDelay: 500,
        // callbacks
        onBegin: () => console.log("animation started"),
        onStringFinished: () => console.log("string finished"),
        onComplete: () => console.log("animation complete"),
      },
});

6. Config the blinking cursor displayed at the end of the text while typing.

const instance = new TypeMe({
      elem: "#example",
      strings: ["String1", "String2", ...],
      cursorProperties: {
        cursorID: "typingCursorID",
        cursorClass: "typingCursorClass",
        cursor: "|",
        cursorRemoveOnAnimationComplete: true,
        cursorAnimationSpeed: 2,
      },
});

7. API methods.

// pause
instance.pause(callback);
// resume
instance.resume(callback);
// toggle
instance.toggle(callback);
// restart
instance.restart(callback);

Changelog:

08/14/2022

• Added slight optimization to the cursor animation

08/08/2022

• Added new property: cursorAnimationSpeed