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

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>