How to Apply Animated text in Elementor Pro Free!

Animated text can be a great way to grab attention on your Elementor-powered website. Though Elementor offers some built-in animation features, for more advanced text animations, you can use custom HTML and CSS. Here’s a step-by-step guide to applying animated text to your Elementor page using custom code.

Animated text in Elementor Pro

Step 1: Add an HTML Widget

First, you’ll need to add an HTML widget to your page:

1. Open the Elementor editor.
2. Drag and drop an HTML widget to the desired section of your page.
3. In the HTML code editor, you will input the necessary HTML structure for the text animation.

Step 2: Insert Custom HTML Code

Below is an example of custom HTML code that will serve as the structure for your animated text:

HTML Code:

<div class="wrapper">
	<svg>
		<text x="50%" y="50%" dy=".35em" text-anchor="middle">
			Hello Friends!
		</text>
	</svg>
</div>

In this example, we have a <div> element containing multiple Text elements, each holding a word that will be animated individually.

Step 3: Apply Custom CSS for Animation

Now that you have the HTML structure in place, you need to apply custom CSS to animate the text. Follow these steps:

1. Select the HTML widget where you added the HTML code.
2. Navigate to the Advanced tab and find the Custom CSS section (available in Elementor Pro).
3. Enter the following CSS code:

Custom CSS Code:

@import url("https://fonts.googleapis.com/css2?family=Russo+One&display=swap");

svg {
	font-family: "Russo One", sans-serif;
	width: 100%; height: 100%;
}
svg text {
	animation: stroke 5s infinite alternate;
	stroke-width: 2;
	stroke: #365FA0;
	font-size: 100px;
}
@keyframes stroke {
	0%   {
		fill: rgba(72,138,204,0); stroke: rgba(54,95,160,1);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(72,138,204,0); stroke: rgba(54,95,160,1); }
	80%  {fill: rgba(72,138,204,0); stroke: rgba(54,95,160,1); stroke-width: 3; }
	100% {
		fill: rgba(72,138,204,1); stroke: rgba(54,95,160,0);
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}

.wrapper {background-color: #12325};

Explanation of the CSS

• .animated-text: This is the container for your animated words. It’s styled to ensure that the animation stays within the bounds of the text.
• .word: This class is applied to each word, and it includes the opacity: 0 style to make the word invisible at first. The animation fadeInUp then brings the word into view with a slight upward motion.
• @keyframes fadeInUp: This animation moves each word from 20px below its original position to its default position while gradually fading in.
• Animation Delays: Each .word element has a different animation delay, so the words animate sequentially. The delay times (in seconds) are adjusted accordingly to stagger the animations.

Step 4: Customize the Animation

You can easily customize this animation by adjusting different parts of the CSS:

• Animation Timing: Change the duration of the animation by modifying the 2s value in the animation: fadeInUp 2s property. Make it faster or slower depending on your preference.
• Animation Type: If you prefer different animation effects, you can create new @keyframes rules. For example, you could animate words sliding in from the left or right, or even add a bounce effect.
• Font Size and Styling: Modify the font-size, font-weight, and other text properties within the .animated-text class to match your website’s design.

Step 5: Preview and Publish

After you’ve added your custom HTML and CSS, preview the page to make sure the animation works smoothly. If everything looks good, publish or update your page to apply the changes.

Conclusion

Using custom HTML and CSS in Elementor is a powerful way to add animated text effects that go beyond the default options. With a bit of creativity, you can create eye-catching text animations that enhance the user experience on your website. This method gives you full control over the animation style, speed, and sequence, ensuring your design stands out.