Typed.js Animated Writing Feature

How to get that super neat self-typed text?

The automatic text writing feature you see on the homepage of Indigo’s demo is achieved by the use of a shortcode we’ve implemented on the theme, based on the awesome Typed.js script by Matt Boldt (https://github.com/mattboldt/typed.js/).

To enable this shortcode you need first to install the AT Shortcodes plugin you got with the theme. You will find it by navigating to the Getting Started page (Appearance » Getting Started) and clicking on the Plugins tab. Once you install and activate the plugin, you can use the typed shortcode as follows:

[qi_typed strings="string 1|string 2|string 3|string 4|etc" loop="false/true" startdelay="number-in-ms" typespeed="number-in-ms" backspeed="number-in-ms" backdelay="number-in-ms"]

Where the options are:

  • strings: the words that will be alternately typed.
  • loop: whether to loop the animation or not. Defaults to true.
  • startdelay: how many milliseconds to wait before starting to write. Defaults to 800.
  • typespeed: the typing speed. Defaults to 40.
  • backspeed: how fast to perform the delete motion. Defaults to 0.
  • backdelay: how many milliseconds to wait before starting with the delete motion. Defaults to 800.

You can use an option, or leave it to run with the default parameters. The only option that is essentially needed is the strings one, of course.

This is what we added to the Slogan module you see at the beginning of the demo, after we added the words ‘A WordPress theme for ‘, and everything (including the shortcode) inside an H3 heading:

[qi_typed strings="website builders|business creators|project leads|hip designers|bloggers|creative agencies|everyone." loop="false"]