How to Create Text Stroke Slide Animation in Elementor

Updated: November 7, 2021

Elementor offers a number of features you can maximize to make your website more alive. From entrance and exit animation effects, scrolling effects to mouse effects. If these features are not enough for you, you can use custom CSS to add a certain effect that is not available in Elementor by deafult. In this post, we will show you how to create a text stroke slide animation effect using custom CSS.

It’s true that CSS knowledge is not required to create a website with Elementor, but if you have CSS knowledge, it will be a massive bonus as you will be able to achieve more things in terms of styling. To give you an overview of what will create in this post, take a look at the following screencast.

Elementor has no default options to create a text effect like the one above. You can only achieve it via custom CSS.

How to create a text effect like the one above?

First off, create a new page (or edit an existing one) and edit it with Elementor. New to Elementor? You can read our previous article to learn how to use Elementor. On the Elementor editor, drag the Heading widget to the canvas area.

Replace the default text. Once done, go to the Style tab to set the text color and typography settings. For the best result, you can use a thick font. In this example, we use Poppins. This font is already available in Elementor by default so that you don’t need to install it yourself. Here are the typography settings we use in this example.

  • Font family: Poppins
  • Font size: 90 px
  • Font weight: 90
  • Text color: Blue

Once done styling up the text, go to the Advanced tab and open the Custom CSS block and paste the following CSS snippet.

The snippet:

:root{
    --myText : 'elementor';
    --textColor: #3d57fe;
    --textStroke: 3px;
    --anDuration: 4s;
}
selector{
    -webkit-text-stroke: var(--textStroke) var(--textColor);
    display: table;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    text-align: center;
    margin: 0 auto
}
selector .elementor-heading-title::before{
    content: var(--myText);
    color: var(--textColor);
    position: absolute;
    top: 0;
    width: 0%;
    height: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    border-right: var(--textStroke) solid var(--textColor);
    -webkit-animation:animateX var(--anDuration) linear infinite;
            animation:animateX var(--anDuration) linear infinite;
}
@-webkit-keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}
@keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}

One thing to note: On the myText variable, make sure to use the same value (text) as the text of the Heading widget. To change the text color (the slide text), you can change the value (hex code) of the textColor variable. To change the stroke size, you can change the value of the textStroke variable. To change the slide speed, you can change the value of the anDuration variable.

Once done, you can set the background of the column (or section) where the Heading widget belongs to, to fit the text color.

The Bottom Line

Heading is one of the native widgets offered by Elementor. The widget is useful to add a title of page or section to affirm what is the page/section about. You have options to set the typography settings like font family, font size, font style, to text color. Also, there are options to apply some animation effects. If you have CSS knowledge, the options to style up the Heading widget are limitless as Elementor supports custom CSS. Please note that the ability to add custom CSS is only available on Elementor Pro, so be sure you have upgraded your Elementor to the pro version in case you haven’t done so (read: Elementor Free vs Pro).

Originally posted on: November 7, 2021

This page may contain affiliate links, which help support WP Pagebuilders.

Building a website is as fun as playing puzzle with Elementor

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.