Creating animated typing headlines in Elementor with Typed.js

Introduction

Enhancing your website with an animated typing headline can boost user engagement. In this tutorial, we’ll guide you through creating this effect with Elementor, a popular WordPress page builder. You can also apply this technique to other popular page builders and block editors.

Whether you’re building a landing page, a portfolio site, or a corporate business website, this dynamic text effect is sure to captivate your audience. So let’s dive in!

Load the Typed.js Library

To create this effect, we’ll utilise the Typed.js library, which can be found on GitHub. The first step is to load this external script into your WordPress site. You have multiple options for doing this: using Elementor’s Custom Code feature, adding it to your child theme’s functions.php file, or employing a code snippet plugin such as Code Snippets Pro, WPCodeBox, or WPCode.

For this tutorial, we’ll use an HTML widget directly on the page where we want this effect.

Add an HTML Widget to the Page

Drag and drop an HTML widget to the bottom of the page. Ensure that it’s placed below all other sections to avoid any layout issues.

Load the Typed.js Script from the CDN

Inside the HTML widget, insert the following code snippet to load the Typed.js library from a CDN. You can find the most up-to-date script on GitHub or on cdnjs.

<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>

Add your required text

Now, add a heading widget to your page with the desired static text and a placeholder of the animated typing text, like this: <span class="dd-typing-text-1"></span>

Feel free to replace "dd-typing-text-1" with your preferred class name. Under the Style tab, you can customise the font size and colour of the static text to your liking.

Add your animated text strings

To create the typing animation, create a new Typed object and specify the elementId (the class name you used earlier) along with the desired parameters. Insert the following javascript code to the HTML widget:

<script>
//typing text animated script
    var text1 = new Typed(".dd-typing-text-1", {
    strings: ["Designer", "Developer", "Photographer"],
    typeSpeed: 100,
    backSpeed: 60,
    backDelay: 3000,
    loop: true,
    });
</script>

To style the animated text, you can use Custom CSS. Here’s an example:

.dd-typing-text-1{
color: #daa520;
font-weight: 700;
}

Fix jumpy text on mobile

If you encounter issues with the dynamic typing text being too wide for the available space on mobile devices, causing it to jump to the next line, you can resolve this by adding custom CSS. Here’s how:

Wrap the static text in a span with a class name (e.g. "dd-static-text"), and then set it to display: block; for the specific media query.

Example:

<span class="dd-static-text">David is my favourite</span><span class="dd-typing-text-1"></span>

Add the following style within the HTML widget or wherever is suitable for you:

    @media screen and (max-width:768px){
        .dd-static-text{
        display: block;
    }

Adding more headlines

If you want to include additional animated headlines on your page, follow these steps:

1. Add another Heading Widget to your page, but be sure to use a different placeholder text for each headline (e.g. ‘<span class="dd-typing-text-2"></span>‘).
2. In the HTML widget where you previously loaded the Typed.js script, create a new instance of the Typed object and specify the new elementId, such as ".dd-typing-text-2".
3. Additionally, you can style the new animated text by adding CSS rules specific to the ".dd-typing-text-2" class.

<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<script>
//typing text animated script
    // first text
    var text1 = new Typed(".dd-typing-text-1", {
    strings: ["Designer", "Developer", "Photographer"],
    typeSpeed: 100,
    backSpeed: 60,
    backDelay: 3000,
    loop: true,
    });
    
    //second text
    var text2 = new Typed(".dd-typing-text-2", {
    strings: ["Girlfriend", "Sister", "Wife", "Partner"],
    typeSpeed: 100,
    backSpeed: 60,
    backDelay: 3000,
    loop: true,
    });
    
</script>
<style>
    /* For Static Text */
    @media screen and (max-width:768px){
    .dd-static-text{
        display: block;
    }
    
    /* For multiple dynamic text */
    .dd-typing-text-1{
        color: #daa520;
        font-weight: 700;
    }
    .dd-typing-text-2{
    color: red;
    font-weight: 700;
    }
</style>

By following these steps, you can create engaging animated typing headlines for your WordPress website using Elementor and the Typed.js library. Feel free to experiment and add as many headlines as you like to make your site more dynamic and captivating for your visitors.