Create Text Stroke Slide Animation In Elementor

Welcome to WebSensePro! In today’s Elementor WordPress tutorial, we’re going to show you how to create a stunning text stroke animation using just a bit of CSS code. No plugins required! Plugins can slow down your website, so using CSS is a great way to keep your site fast and stylish.

Follow this step-by-step guide to add this cool effect to your Elementor page.

Step 1: Add a New Page

1. Go to your WordPress dashboard.
2. Click on “Pages” and then “Add New.”
3. Give your new page a title and click “Edit with Elementor.”

Step 2: Set Up the Flexbox Container

1. In Elementor, click the plus sign in the middle of the screen to add a new section.
2. Choose the flexbox container layout.
3. On the left-hand side, set the height to VH (Viewport Height) and make it 100 so it covers the whole screen.

Step 3: Add a Heading Widget

1. Click the plus sign inside the flexbox container and drag the Heading widget into the section.
2. Customize the heading text to your liking.

Step 4: Style the Container

1. Click on the parent container to select it.
2. Go to the “Style” tab.
3. Change the background type to a solid color, and select a dark bluish color that suits your design.

Step 5: Center the Heading

1. With the parent container still selected, go to the “Layout” tab.
2. Scroll down and set the content alignment to the center.

Step 6: Style the Heading

1. Click on the heading to select it.
2. Go to the “Style” tab.
3. Change the text color to white.
4. Change the typography from Roboto to Poppins.
5. Adjust the font size to around 50. Increase the font-weight if needed.

Step 7: Add Custom CSS for Text Stroke Animation

1. With the heading still selected, go to the “Advanced” tab.
2. Scroll down to the “Custom CSS” section.
3. Paste the CSS code provided in the tutorial. Make sure to match the text in the CSS with your heading text.

Step 8: Customize the Animation

1. Change the stroke color by editing the colors in the CSS code.
2. Adjust the animation duration by changing the 6s to your desired time.
3. Experiment with different stroke widths and colors to get the perfect look.

Step 9: Publish and Preview

1. Click “Publish” to save your changes.
2. Preview your page to see the text stroke animation in action.

Conclusion
Congratulations! You’ve successfully created a stylish text stroke animation in Elementor using only CSS. This method keeps your site lightweight and fast. If you found this tutorial helpful, please subscribe to our channel, hit the like button, and leave a comment below.

Copy Code

:root{
    --myText : 'WEB DESIGN AND DEVELOPMENT';
    --textColor: #2CFF99;
    --textStroke: 2px;
    --anDuration: 6s;
}
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%;
    }
}