Text Animation

Text Animation

⌘K
  1. Home
  2. Docs
  3. Animation
  4. Animation Widgets
  5. Text Animation

To add animation to the title and paragraph text of a page, first you need to open the page and click on the “Edit with Elementor” button. Once you’re on the Elementor page, you will find the “ Animated Title” and “ Animated Text” widgets under the “Delixa Addons” section on the left panel.

You can use the “Animated Title” for creating animated titles for your page. And the “Animated Text” will enable you to animate the paragraphs.

To animate the title text, first tap the “plus” icon below the page and insert a container for your page title. Drag the “Animated Title” widget to the container and write down your title. Then click “Text Animation,” and the “Animation” option will appear with a drop-down list. From the list, choose a certain type of animation.

You can choose any of the “Character”, “Word”, “Text Move”, “Text Reveal”, or “Text Invert” animations that you wish to include in the title. Each type of animation has its own characteristics and animated nature. 

Once you select an animation, you can adjust the “Delay”, “Stagger”, “Translate-X”, and “Translate-Y” as per your requirements.

Activate the “Animation on scroll” button to add scrolling animation to your title. Choose a breakpoint from Mobile Portrait, Mobile Landscape, Tablet Portrait, Tablet Landscape, Laptop, and Widescreen. Also, set the minimum or maximum range of breakpoints from “Breakpoint Min/Max.”.

Similarly, insert another container for the paragraph.  Drag the “Animated Text” widget to it and add the paragraph text. Under the “Text Animation.” option, select a specific type of animation, adjust the delay, set the breakpoint, and activate the “Animation on scroll” button to make the paragraph animated. 

You will find the “Heading” and “Text Editor” widgets under the “Basic” section of the left panel. These are Elementor’s built-in widgets for animation. The first one is for adding animation to the title, and the second one is for paragraphs. You can utilize them in the same manner. 

You can activate “Enable Scroll Smoother” by defining the values “Speed” and “Lag” if you want to scroll smoothly. You can enable the “Animation on scroll” button here as well. Once you’re done with the animation, just hit the “Update” button to save the settings and experiment with the changes. 

Was this article helpful to you? No Yes

How can we help?