While building this blog, I wanted to create a “typing” special effect in my HomePage.

I wanted to be able to input a text where the final part would be written and then erased to display a different set of words, like in this example.

I also needed to display the text in two different sizes, one for large and medium screens and another for small screens.

I decided to use a JavaScript library, TypedJs, that seemed seemed perfect for the purpose.

I then started creating a column with two text blocks, the first for large and medium screens and the second for small ones, and a code block, to contain the javascript code for the animation.

Inside the text blocks, I put the same text “Looking for a blog / that talks about” with different font sizes and a span with a specific id, different between the medium/large to the small size text.

The span will be replaced by TypedJs with the text configured in the code section.

As you can notice, after the span I added a   because, otherwise, when TypedJs deletes every character of the text, the frame containing the text shrinks causing the following content to bounce up and down.

Then I added the code section, with the required JavaScript code.

In this example, I included the most complete version of the javascript configuration object that can be used to configure the animation.

Feel free to use only the parts that you really need, looking at the project description page.

I just adjusted the speeds and added a small initial delay because the text block has an animation on appearance, and I wanted the text animation to start only after the block was properly positioned.

Et voilà !