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 “WCF Animated Title” and “WCF Animated Text” widgets under the “WCF” section on the left panel.
These widgets belong to Crowdy Theme. You can use the “WCF Animated Title” for creating animated titles for your page. And the “WCF 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 “WCF 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 “WCF 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.
Under the “Advanced ” section of both Crowdy Theme and Elementor’s animation widgets, you will see another “Animation” option. From this option, you can set the “fade animation” by adjusting the “Delay”, “Duration”, “Ease”, “Fade offset”, and “Breakpoint” for the title and paragraph text.
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.