Typed Text

Animate text with a typing effect

About the Plugin

GitHubnpm

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.