Animated Title

Before setting up the Animated Title Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Animated Title Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Introduction

Want your titles to pop? The Animated Title Widget adds animations to your text, making it more engaging and fun for your website visitors.

Key Use Cases for the Image Widget in Elementor:

• Use the Animated Title widget to create eye-catching headlines for your homepage or landing pages.
• Highlight key services or promotions with dynamic animated text to engage visitors.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Animated Title Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Animated Title Widget in the list.
• Toggle it on to enable the widget.

Now, the Animated Title Widget is ready to use!

How to Add the Animated Title Widget in Elementor:

• Open the page where you want to add the Animated Title widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Animated Title Widget.”
• Drag the widget to your desired section.
• The Animated Title widget is now ready for customization!

How to Configure the Text Hover Image Widget in Animation Addons:

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

Your Animated Title Widget is now ready to use! Here’s the interface where you can configure the settings and personalize the animated title using different tabs for a dynamic and engaging visual effect.

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

The Animated Title Widget is available in Elementor and can be placed in any section of your page. It includes three main settings tabs: Content, Style, and Advanced—each offering customization options to fine-tune your animated title display.

In the Content settings of the Animated Title Widget, you’ll find the Content section and the Text Animation feature. This allows you to insert and organize your text, while the animation options (available in the editor panel) help bring your titles to life. Note: Animation effects require the Pro version of the plugin.

Content Settings

This is the Content section of the Animated Title Widget in Elementor. Here’s what each option does:

• Title: Enter your desired text. You can highlight parts of the text by enclosing them in square brackets [ ].
• Show Prefix: Toggle this option to display or hide a prefix before the title.

• HTML Tag: Choose the appropriate HTML heading tag (H1, H2, H3, etc.) for SEO and design structure.
• Alignment: Adjust the title’s alignment to left, center, right, or justified for proper positioning on the page.

Text Animation 

Also, explore the optional Text Animation section to apply engaging effects for smooth transitions. This section offers various animation categories that enhance your content’s visual appeal and make your titles more dynamic.

Character

The Characters animation in the Animated Title widget animates each character of the text individually, creating effects like typing, fading, or bouncing one letter at a time. You’ll find several customization options to control how each character behaves, allowing for precise and engaging text animations.

Enable Editor Toggle: When activated, this allows you to preview and edit the animation directly within the Elementor editor for the Animated Title widget. If disabled, the live preview won’t be shown. With it enabled, use the Play Animation button to instantly view how your customized text animation will appear.

Delay: Sets the time interval before the Animated Title animation starts. This lets you control how long after the page loads the animation should begin, helping you create a more timed and engaging user experience.

Duration: Defines how long the animation of the Animated Title takes to complete. A higher duration slows down the animation, while a lower value speeds it up—allowing precise control over pacing and visual impact.

Stagger: This option adjusts the delay between the appearance of each character in the Animated Title. A higher value increases the delay, creating a more pronounced stagger effect as each character appears one after another.

• Stagger in Animated Title Widget:
  Consider the phrase “Welcome to Our Website!”

• Low Stagger (0.1s): Each character appears quickly one after another, creating a smooth and fast animation. For example, “W” appears, then “e” after 0.1s, followed by “l”, and so on.
  
• High Stagger (0.5s): Each character has a longer delay between appearances, adding a dramatic, attention-grabbing effect as each letter shows up one by one.

Animation on Scroll Toggle (Animated Title Widget): When enabled, the animation activates as the user scrolls and the widget enters view. If disabled, the animation plays instantly upon page load, independent of scrolling.

Transform X & Y (Animated Title Widget): These settings let you shift the text horizontally (X-axis) and vertically (Y-axis) during animation. Measured in pixels, they help define the exact movement path—like sliding text left, right, up, or down for dynamic visual effects.

Transform X & Y (Animated Title Widget):

• X-Axis (Left/Right): Controls horizontal movement.
  → 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 downward.
  → Negative values (−) move the text upward.

These options help you fine-tune how the animated title enters the screen for a more dynamic effect.

Breakpoint (Animated Title Widget): This option allows you to control how the animation behaves across different screen sizes—desktop, tablet, and mobile—ensuring your animated text looks great and performs smoothly on all devices.

Text Move (Animated Title Widget): This setting moves the entire text block across the screen, allowing you to create dynamic transitions by adjusting direction and speed—perfect for attention-grabbing animations.

Text Reveal (Animated Title Widget): Displays the text gradually using effects like wipe or fade, adding a dramatic and visually engaging entrance to your content.

These settings provide complete control over the timing, direction, and responsiveness of the animated title, enabling you to adjust the animation to your preferences and preview it before applying the final changes.

Word

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

• Enable Editor Toggle: When enabled, this option allows you to preview and adjust the animation directly within the Elementor editor. If disabled, the animation preview is turned off, requiring manual adjustments to settings. With the editor enabled, you can click the Play Animation button to see the animation in action with all customizations applied.
• Delay: This controls the time before the animation starts for each word. Adjusting the delay will set how long after the page loads the animation will begin for each individual word, allowing you to create a staggered or synchronized effect.
• Duration: This controls how long the animation takes to complete for each word. A longer duration will slow down the animation, while a shorter duration will speed it up.
• Stagger: This adjusts the delay between the appearance of each word. Increasing the stagger time will make words appear one after another with more delay, while a shorter value will make them appear quickly in succession.

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, “Welcome” will appear first, then “to” will appear 0.1 seconds later, followed by “Our” after another 0.1 seconds. The delay between each word’s appearance is minimal, creating a smooth and quick animation effect.
• High Stagger (0.5 seconds): A longer delay will be applied between each word’s appearance. “Welcome” will appear first, followed by “to” after a 0.5-second delay, then “Our” 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: These options allow you to adjust the movement of the words along the X (horizontal) and Y (vertical) axes. Positive values move the text in the respective direction (right or down), while negative values move it in the opposite direction (left or up), giving you control over the flow of the animation.

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.

• 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 a responsive design that adapts well to different screen sizes and maintains optimal performance across all devices.

Text Move 

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

• Enable Editor Toggle: When enabled, this option allows you to preview and edit the animation directly in the Elementor editor. If turned off, the preview is disabled, and you will need to manually adjust the settings. With the editor toggle on, you can also click the Play Animation button to see the animation effect live as you make changes.
• Delay: This controls the amount of time before the animation starts for the text. By adjusting the delay, you can set how long after the page load the animation should begin, allowing for a smooth entrance of the animated title.
• Duration: This setting determines 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 up the animation, allowing you to control the overall timing of the effect.
• Stagger: This option controls the delay between each piece of text’s animation. Increasing the stagger time will cause each word or letter to appear with a delay after the previous one, creating a more spaced-out effect. A lower value results in a quicker transition where the text appears almost simultaneously.
• Animation on Scroll Toggle: When this option is toggled on, the animation will trigger when the user scrolls down the page. If toggled off, the animation will play immediately upon page load, regardless of the user’s scroll position.
• Transform X & Y: These options enable you to move the text along the X (left/right) and Y (up/down) axes. Adjusting these values allows you to create dynamic text movement effects during the animation.
• Rotation Direction: Choose the direction in which the text will rotate—clockwise or counterclockwise—adding a rotating effect to the text during the animation.
• Rotation Value: This controls the angle of rotation for the text. Positive values rotate the text clockwise, while negative values rotate it counterclockwise. You can set the rotation in degrees for precise control.
• Transform Origin: Define the point of rotation for the text. Options include top left, top right, center, bottom left, or bottom right, allowing you to adjust where the rotation starts.
• Breakpoint: This feature allows you to set custom breakpoints for different screen sizes (desktop, tablet, mobile), ensuring that the animation behaves responsively and adapts to various devices and screen sizes.

Text Reveal

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

• 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.
• Delay: 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.

• 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.
• 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.
• 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.
• 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.

Text InvertEnable Editor Toggle: When enabled, this option allows you to directly preview and edit the animation within the Elementor editor. It helps you see how your animation will look in real time as you make adjustments. If toggled off, the editor preview is disabled, and you will need to manually adjust settings and preview the animation on the live page.

3. Play Animation Button:
This button is available when the Enable Editor Toggle is turned on. By clicking it, you can preview the animation directly in the Elementor editor. It lets you visualize the effect of your customizations, helping you make precise adjustments before finalizing the settings.

4. Breakpoint: The Breakpoint option allows you to set different animations for different screen sizes, such as desktop, tablet, and mobile. This ensures that the animation remains responsive, providing an optimized viewing experience across various devices. 

3D Spin

Enable on Editor Button

This toggle allows you to preview and edit the 3D spin animation directly within the Elementor editor.

• ON: You can see the animation live as you make changes.
  
• OFF: The animation won’t play in the editor, and you’ll have to check the live page for preview.

Play Animation

This button appears when Enable on Editor is active. Clicking it will play the 3D spin animation instantly in the editor, giving you a quick preview of the final output based on your current settings.

Delay

This setting controls the time (in seconds) before the 3D spin animation starts after the page is loaded.

• A higher value causes a longer wait before the animation begins.
  
• Useful when you want the animation to appear later for emphasis.
  

Animation on Scroll

When enabled, the 3D spin animation will trigger only when the user scrolls to the section where the animated title is placed.

• OFF: Animation starts as soon as the page loads.
  
• ON: Starts only when visible in the viewport, improving performance and focus.

Spin Text Color

This option lets you set the color of the text while it’s spinning.

• Helps you highlight the animation or match it with your brand style.
  
• You can choose bold colors or soft transitions depending on the effect you want.

Start

Defines the initial state of the 3D spin animation (angle, scale, opacity, etc.).

• It determines how the text looks before the animation begins.
  
• Common values might include the initial 3D rotation or position.
  

End

Sets the final state of the 3D spin animation after it completes.

• Controls where and how the text ends up post-animation.
  
• Typically used to bring the text to a readable or stable final appearance.

Scrub

When enabled, this makes the animation tied to the scroll position.

• The animation plays as the user scrolls—forward or backward.
  
• Ideal for creating interactive scroll-driven visual effects.
  

Toggle Actions

This allows you to define how the animation behaves during user interactions like scroll start, reverse, or end.

• Useful for setting repeat, reset, or pause behavior.
  
• Enhances control over animation flow and interactivity.

Breakpoint

The Breakpoint option helps you define different animation behaviors for different devices like desktop, tablet, and mobile.

• Ensures the 3D spin animation is responsive and looks great on all screen sizes.
  
• You can adjust or disable animations based on the device type for performance or design reasons.

Style Settings

The Style section includes one sections: Title. 

This is the Style section of the Animated Title Widget in Elementor. Here’s what each option does:

Title Styling

• Text Color: Defines the title text color, allowing customization for better visibility and design consistency.
• Typography: Controls font properties, including style, size, weight, and letter spacing for enhanced readability.

• Text Stroke: Applies an outline effect to the text, improving emphasis and contrast.
• Text Shadow: Adds shadow effects to create depth and highlight the text.
• Blend Mode: Determines how the text interacts with the background for seamless integration.

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 Title Widget in Elementor to effectively customize and display images on your website.

If you need further assistance, don’t hesitate to reach out to our support team!