Search

How to Create Text Stroke Slide Animation in Elementor

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: 900
  • 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).

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?