# Typed

Made with Typed, now you can animate words and phrases.

Official Documentation

## Usage

### JS

In order to use this plugin on your page you will need to include the following script in the “Page JS” area from the page’s footer:

    <script src="../../assets/libs/typed.js/lib/typed.min.js"></script>

### Initialization

Add the `.typed` class on the element you want to add the typing animation. Also, make sure to add a unique `id` for each `typed` instance on your page.

After that, use `data-type-this="word-1, word-2, word-3"` to create an array with the words needed to be used in the animation.

Heads up! Typed animation will automatically pause when out of viewport so the line break doesn’t affect the page’s height. It resumes once it is visible to the user again.

## Basic

Show code

##### This is why I need creativity.

    <h5 class="m-0">
        This is why I need
        <span class="text-info typed" id="type-example" data-type-this="creativity., imagination., energy., inspiration.">creativity.</span>
    </h5>