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

Labib Ahmed

SmartText Rotator – Add Motion to Your Words

A WordPress plugin that allows you to add rotating words in a sentence with CSS3 animations.

Freemius

Abu Hayat

bPlugins

Charles Cormier

Md Noornabi Islam

Typing Text – Add Animated Typing Effects to Headings or Text

Add stunning animated typing effects to your WordPress headings or text.

Manesh Timilsina

Nilambar Sharma

Prime Addons for Elementor

middlewayapproach

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 <code>...</code> for italic or <code>...</code> 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 <a href="https://github.com/mattboldt/typed.js" rel="nofollow ugc">repo</a>
Icon made by <a href="https://www.flaticon.com/de/autoren/freepik" rel="nofollow ugc">freepik</a> from www.flaticon.com

Alternatives to Typing Animation Block

Top alternatives