Animated Text

Before setting up the Animated Text Widget , make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Animated Text Widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

Animated Text in the Elementor Addon adds dynamic effects like fade, slide, and bounce to boost visual appeal and engagement.

Key Use Cases for Animated Text in Elementor Addons

• Use animated text to highlight key messages, create engaging headers, or add emphasis to call-to-action buttons.
• Enhance page introductions, promotional banners, or event announcements with dynamic text effects.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Search No Result Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Search No Result widget in the list.
• Toggle it on to enable the widget.

Now, the Search No Result widget is ready to use!

How to Add the Animated Text Widget in Elementor:

• Open the page where you want to add the Animated Text widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Animated Text Widget.”
• Drag the widget to your desired section.

The Animated Text widget is now ready for customization.

How to Configure the Animated Text Widget in Animation Addons?

• In the Elementor panel, search for the “Animated Text Widget.”
• Drag and drop the widget into the desired section.
• Customize the widget settings using the available options in the Elementor panel. 

Your Animated Text Widget is now ready to use! Here’s the interface where you can configure the settings and customize the Animated Text across various tabs for a personalized effect.

Configuring Animated Text Widget in Animation Addons: A Step-by-Step Guide

The Animated Text Widget can be added anywhere in Elementor, with three main settings: Content, Style, and Advanced.

In the Content settings, you’ll find two options: Content, and the Text Animation Feature is available in the editor panel. Animations require the Pro version.

Content Settings

The Tab lets you choose your preferred image, adjust its resolution, and set the alignment.

Text Animation

• And, explore the special Text Animation feature of our widget, which offers a variety of amazing animation categories with customization options for smooth transitions.

• We offer different animation categories under it, including Characters, Word, Text Move, and Text Reveal. 

Characters 

Animates each character of the text individually, often used for effects like typing or fading in one letter at a time. In the Characters animation, you’ll find several customization options:

• Enable Editor Toggle: When toggled on, this allows you to preview and edit the animation directly in the editor. If toggled off, the editor preview is disabled, and you’ll need to manually adjust settings. With the editor enabled, you can also click the Play Animation button to see how your animation will look after applying all the customizations.
  
• Delay: Controls the delay time before the animation starts. You can adjust this to set a specific time after the page loads before the animation begins.
  
• Duration: Adjust the length of the animation. Increasing the duration will make the animation slower, while decreasing it will make it faster.
  
• Stagger: This option controls the delay between the appearance of each character. A higher value will stagger the animation more, making each character appear with a delay after the other.

Consider a sentence like: “Welcome to Our Website!” When you set the Stagger option:

• Low Stagger (0.1 seconds): Each character will appear quickly after the previous one. For example, “W” will appear first, then “e” will appear 0.1 seconds later, followed by “l” after another 0.1 seconds, and so on. The delay between each character’s appearance is minimal, creating a smooth, quick animation effect.
  
• High Stagger (0.5 seconds): A longer delay will be applied between the appearance of each character. “W” will appear first, followed by “e” after a 0.5-second delay, then “l” after another 0.5 seconds, and so on. This creates a more dramatic effect with noticeable gaps between each character’s appearance.
  

• Animation on Scroll Toggle: When toggled on, the animation will trigger as the user scrolls down the page. If toggled off, the animation will occur immediately when the page is loaded, regardless of the scroll position.
  
• Transform X & Y: These options allow you to adjust the movement of the text along the X and Y axes (left/right and up/down), giving you precise control over the direction of the animation. The values are measured in pixels (px), meaning you can specify how far the text moves in each direction.

• X-Axis (left/right): Controls horizontal movement. Positive values move the text to the right, while negative values move it to the left.

Note: Positive values (+) move the text to the right & Negative values (−) move the text to the left.

• Y-Axis (up/down): Controls vertical movement. Positive values move the text down, and negative values move it up.

Note:  Positive values (+) move the text down & Negative values (−) move the text up.

• Breakpoint: This option allows you to set the animation’s behavior on different screen sizes (desktop, tablet, mobile), ensuring a responsive experience across devices.

• Text Move: Moves the entire text across the screen, with various directions and speeds for dynamic transitions.

• Text Reveal: Reveals the text progressively, such as through a wiping or fading effect, giving a more dramatic entrance.

These settings give you full control over the timing, direction, and responsiveness of the animated text, allowing you to fine-tune the animation and preview it before finalizing the changes.

Word

In the Word animation category, you have several customization options:

• Enable Editor Toggle: When toggled on, this option lets you preview and edit the animation directly in the Elementor editor. If toggled off, the animation preview is disabled, and you’ll need to adjust settings manually. With the editor enabled, you can click the Play Animation button to see how the animation looks after applying all customizations.
• Delay: This controls the time delay before the animation starts for each word. Adjusting the delay will determine how long after the page load the animation will begin for each word.
• Duration: Adjusts how long the animation will take to complete for each word. A longer duration will make the animation slower, while a shorter duration will speed it up.
• Stagger: This option controls how much of a delay there will be between each word’s animation. Increasing the stagger time will make each word appear one after another with a delay, while a lower value will make them appear more quickly.

Consider a sentence like: “Welcome to Our Website!”, When you set the Stagger option:

• Low Stagger (0.1 seconds): Each word will appear quickly after the previous one. For example, “Explore” will appear first, then “Our” will appear 0.1 seconds later, followed by “Features!” after another 0.1 seconds. The delay between each word’s appearance is minimal, creating a smooth and fast animation effect.
  
• High Stagger (0.5 seconds): A longer delay will be applied between the appearance of each word. “Explore” will appear first, followed by “Our” after a 0.5-second delay, then “Features!” after another 0.5 seconds. This creates a more dramatic effect with noticeable gaps between the appearance of each word.

• Animation on Scroll Toggle: When toggled on, the animation will trigger as the user scrolls down the page. If toggled off, the animation will play immediately when the page loads, regardless of the user’s scroll position.
• Transform X & Y: Adjusting Movement for Word Animation (X and Y Axes) –

These options allow you to adjust the movement of each word along the X and Y axes (left/right and up/down), giving you precise control over the direction of the animation. The values are measured in pixels (px), allowing you to specify how far the words move in each direction.

• X-Axis (left/right): Controls horizontal movement.
  • Positive values (+) move the word to the right.
  • Negative values (−) move the word to the left.

Example: If you set the X-Axis value to +50px, the word will shift 50px to the right. If you set it to -50px, the word will shift 50px to the left.

• Y-Axis (up/down): Controls vertical movement.

• Y-Axis (up/down): Controls vertical movement.
  • Positive values (+) move the word down.
  • Negative values (−) move the word up.

Example: If you set the Y-Axis value to +30px, the word will move 30px down. If you set it to -30px, the word will move 30px up.

• Breakpoint: This option allows you to set custom breakpoints for different screen sizes (desktop, tablet, and mobile). You can adjust how the animation behaves on various devices, ensuring the animation is responsive and adapts well to different screen sizes.

Text Move 

In the Text Move animation category, you have several customization options:

1. Enable Editor Toggle: When toggled on, this option lets you preview and edit the animation directly in the Elementor editor. If toggled off, the animation preview is disabled, and you’ll need to adjust settings manually. With the editor enabled, you can click the Play Animation button to see how the animation looks after applying all customizations.
   
2. Delay: Controls the time delay before the animation starts for the text. Adjusting the delay determines how long after the page load the animation will begin.
   
3. Duration: Adjusts how long the animation will take to complete for the text. A longer duration will make the animation slower, while a shorter duration will speed it up.
   
4. Stagger: Controls the delay between each text’s animation. Increasing the stagger time will make each piece of text appear one after another with a delay, while a lower value will make them appear more quickly.
   
5. Animation on Scroll Toggle: When toggled on, the animation will trigger as the user scrolls down the page. If toggled off, the animation will play immediately when the page loads, regardless of the user’s scroll position.
   
6. Transform X & Y: These options allow you to move the text along the X (left/right) and Y (up/down) axes. By adjusting these, you can create dynamic movement effects for the text during the animation.
   
7. Rotation Direction: This option lets you choose the direction in which the text will rotate (clockwise or counterclockwise). It adds a rotating effect to the text during the animation.
   
8. Rotation Value: Controls how much the text will rotate. You can set the angle of rotation in degrees. Positive values will rotate clockwise, and negative values will rotate counterclockwise.
   
9. Transform Origin: Defines the point from which the text will rotate. You can choose a starting point such as top left, top right, center, bottom left, or bottom right, giving you more control over the rotation effect.
   
10. Breakpoint: This option allows you to set custom breakpoints for different screen sizes (desktop, tablet, and mobile). You can adjust how the animation behaves on various devices, ensuring the animation is responsive and adapts well to different screen sizes.

Text Reveal

In the Text Reveal animation category, you have the following customization options:

1. Enable Editor Toggle: When toggled on, you can directly preview and edit the animation within the Elementor editor. If toggled off, the editor view is disabled, and you’ll need to apply and test the animation manually. With the editor enabled, you can use the Play Animation button to preview how the animation looks after all customizations.
   
2. Delay: This controls the delay before the text reveal animation starts. You can set a time (in seconds) after the page loads for the text to begin its animation.
   
3. Duration: Adjusts how long the text reveal animation will last. A shorter duration will make the animation happen more quickly, while a longer duration will slow it down.
   
4. Stagger: Controls the delay between each text reveal. A higher stagger time will reveal each part of the text one after another with a delay, creating a sequential effect.
   
5. Animation on Scroll Toggle: When enabled, the animation will only trigger when the user scrolls to the section with the animated text. If disabled, the animation will play immediately as the page loads.
   
6. Breakpoint: This option allows you to define how the text reveal animation behaves on different screen sizes (desktop, tablet, and mobile). You can set custom animations for each device type, ensuring responsiveness and an optimal experience across devices.

These customizations offer you complete control over the timing, sequencing, and behavior of the text reveal animation, allowing you to tailor it to fit your design needs and enhance user interaction.

Style Settings

The Style section in Elementor allows you to customize the appearance of your text. 

• Style: You can customize the text color, typography (font, size, weight), add text shadows, and adjust link styles, including hover effects.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Animated Text Widget in Elementor to effectively customize and display dynamic text on your website.

If you need further assistance, feel free to reach out to our support team!