Add Typing Animations to Your Site with Typing.js

Preview:

Description:

A 1kb JavaScript plugin that lets you create typewriter-style animations where text appears on your page character by character, or even gets deleted for a dramatic effect.

You can use it to highlight headline text, create engaging introductions, or even simulate a real person typing. It’s a simple way to grab your visitor’s attention and make your content more interactive.

How to use it:

1. Download and include the typing.min.js library in your HTML file.

<script src="typing.min.js"></script>

2. Create an HTML element where you want the typing animation to appear. Give it a unique ID so you can reference it later.

<h2 id="example"></h2>

3. Initialize the typing.js and specify the text to be typed.

const instance = new Typing('#example', {
      data: 'CSS Script Com',
})

4. Call the start() method on your Typing.js instance to begin the animation.

instance.start()

5. The library offers various configuration options. You can control typing speed with delay, set the animation to loop with repeat, and even add a delete effect with the back property.

const instance = new Typing('#example', {
      data: 'Hello world!',
      speed: 60,
      delay: 0,
      repeat: false,
      back: {
        speed: 50,
        delay: 1000
      },
})