Typing Animation Block

May 18, 2021

Typing Animation Block Plugin

A Gutenberg block to render a typing animation or typewriter effect.

You can use the block inside the Gutenberg editor as you would use a headline block. You can find it in the common section. You can change the text that appears in the animation in the editor (Number 1 in the screenshot). The different sentences are separated by a pipe (|). You can format the text by using <i>...</i> for italic or <b>...</b> for bold text. To change the underlying element that is used in the html of the page (h1 to h6 or span) there is a dropdown menu in the block toolbar(Number 2 in the screenshot). In the block panel you find different options to customize the speed, looping and other options of the typing (Number 3 in the screenshot). The underlying library used is Typed.js. You can find more information in the repo

Icon made by freepik from www.flaticon.com

Installation

After you install and activate the plugin you can use it as a block in the Gutenberg editor. You find it under the common section.

Screenshots

  1. The position of the different parameters as explained in the description.

    The position of the different parameters as explained in the description.

Changelog

1.2

  • Test with newest WordPress version
  • Fix some issues with 5.7

1.1

  • Test with newest WordPress version
  • update packages

1.0

  • Initial release

Details

  • Version: 1.2.0
  • Active installations: 300
  • WordPress Version: 5.0
  • Tested up to: 5.7.12
  • PHP Version: 5.6

Ratings


5 Stars
4 Stars
3 Stars
2 Stars
1 Stars