How to create the typewriter effect in a WordPress block

Find out in this tutorial how to get a sentence written (and rewritten) with typewriter effect using the block editor and CSS.

Do you want to apply the “typewriter effect” to animate a text?

You know that at OsomCode I always discourage you from abusing these very little minimalistic effects.

But, hey, I have to admit that the result is very eye-catching for slogans, headers or similar. In fact, in a previous tutorial I explained how to achieve it using JavaScript.

In today’s tutorial we are going to see how to achieve it in a more native way with an editor block and a bit of CSS.

This will be the final result:

Learn how to develop with OsomCode

Do you want to know how to get it? Here are the instructions:

Steps to create an editor block with typewriter effect

1. Create a block with the text and add the CSS class

First of all you have to use a paragraph or header block and add the text you want to display with the typewriter effect.

Once you have done this, go to the “Advanced” section and add typewrite-effect under “Additional CSS class(es)”.

Once you are done, if you want you can convert it to a pattern directly from the block editor.

2. Modify the style.css

Next, enter the following code at the end of the style.css file:

You got it.

To make it adapt to the text you have written you can modify the width value, in this case 34 characters, by the length of your text.

You can use the block editor to know the length of your sentence.

I recommend using short sentences so that the effect is not too “dizzying” and so that it displays correctly on mobile devices.

Depending on the length of the text you will have to add a little extra CSS to make sure the sentence only takes up one line. For example:

@media only screen and (max-width: 600px) {
	.entry-content h2.typewrite-effect {
		font-size: 18px;
	}
}

You can also change the cursor color to match the web design.

Conclusions

Now you know how to give a personal and dynamic touch to a tagline or header by adding animated text with typewriter effect in an editor block without JavaScript.

And remember, don’t abuse this type of effects. Use them only when they serve a purpose.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉