# Typed Text

Animate text with a typing effect

###

About the Plugin

GitHub npm

Typed.js animates an element's text component to "type" a collection of strings as provided in a data attribute.

###

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

1. ###### Include the library in your page

   Our wrapper for the Typed.js library requires ScrollMonitor to disable the typing effect for performance reasons when the typed element leaves the viewport.

   - Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after `jquery.js` and before `theme.js`.

         <!-- Typed text (animated typing effect)-->
         <script type="text/javascript" src="assets/js/typed.min.js"></script>

         <!-- ScrollMonitor (manages events for elements scrolling in and out of view) -->
         <script type="text/javascript" src="assets/js/scrollMonitor.js"></script>

     Alternatively you may wish to load these resources from a CDN to potentially improve page load times.

         <!-- Typed text (animated typing effect)-->
         <script type="text/javascript" src="https://unpkg.com/typed.js@~2.0.11"></script>

         <!-- ScrollMonitor (manages events for elements scrolling in and out of view) -->
         <script type="text/javascript" src="https://unpkg.com/scrollmonitor@~1.2.4"></script>

2. ###### Load the initializer code in `index.js`

   - Declare the following import statement in `js/mrare/index.js`. This ensures that the initializer code is included in the `theme.js` bundle.

         import mrCountdown from './countdown';

   - Ensure the following line appears in the `export` object:

         export {
         mrCountdown,
         };

###

Basic Usage

Add attribute `data-typed-text` to an element.

Pass an array of strings via the `data-strings` attribute. Wrap the array in single quotes so that the inner strings may use double quotes as required.

By default, the strings will be typed in the order that they appear in the array.

    <span data-typed-text data-loop="true" data-type-speed="45" data-strings='["launch your product.","makeover your business.","prove your concept.","showcase your business."]'></span>

###

Options

Any of the options specified in the official documentation can be applied as data attributes in dash-separated form.

Data attribute | Default | Description
--- | --- | ---
`data-strings` | `'["String 1","String 2"]'` | Strings to be typed
`data-strings-element` | `null` | ID of element containing string children
`data-type-speed` | `0` | Type speed in milliseconds
`data-start-delay` | `0` | Time before typing starts in milliseconds
`data-back-speed` | `0` | Backspacing speed in milliseconds
`data-smart-backspace` | `true` | Only backspace what doesn't match the previous string
`data-shuffle` | `false` | Shuffle the strings
`data-back-delay` | `700` | Time before backspacing in milliseconds
`data-fade-out` | `false` | Fade out instead of backspace
`data-fade-out-class` | `"typed-fade-out"` | Css class for fade animation
`data-fade-out-delay` | `500` | Fade out delay in milliseconds
`data-loop` | `false` | Loop strings
`data-loop-count` | Infinity | Amount of loops
`data-show-cursor` | `true` | Show cursor
`data-cursor-char` | `"|"` | Character for cursor
`data-auto-insert-css` | `true` | Insert CSS for cursor and fadeOut into HTML `<head>`
`data-attr` | `null` | Attr attribute for typing - Eg. `"title"`, `"alt"`
`data-bind-input-focus-events` | `false` | Bind to focus and blur if el is text input
`data-content-type` | `"html"` | 'html' or 'null' for plaintext

Callback functions cannot be defined in data attributes.

Please refer to the official documentation for full details.