Elementor text animation. Letter by letter, with GSAP.

Select an Elementor 4 Heading, open the Text Animation section and click Add Interaction. Choose the Character effect and a trigger such as On Page Load, then set Stagger, for example 0.03 seconds, for the gap between letters. Press the row's play button to preview it on the canvas. Text Animation is part of Animation Addons Pro.

Select the Heading, open Text Animation, click Add Interaction and pick an effect: Character for short headlines, Word or Text Move for longer ones, or Text Reveal for an entrance animation where letters rise from behind a mask. Use On Page Load for the hero heading and On Scroll for headings further down the page. It works the same way on Animation Addons' Advanced Heading and Post Title.

For a text animation on scroll, add a Text Animation interaction with the On Scroll trigger. It is a scroll-triggered text animation: it plays once when the text reaches the start line, 85% down the screen by default. Text Reveal and Word are the usual choices. To tie the animation to the scrollbar instead, so it plays forward and back as you scroll, choose Play With Scroll.

Use the Text Invert effect. Select a Paragraph or Heading, add an interaction and choose Text Invert; the trigger locks to Play With Scroll, so each line fills with color as the visitor scrolls and empties when they scroll back. Start and End set where the sweep begins and finishes.

Yes, it uses GSAP SplitText. Animation Addons is an Elementor GSAP addon: it splits your text in the visitor's browser and animates the pieces with GSAP and ScrollTrigger, so you can use GSAP in Elementor without loading or writing it yourself. Elementor still outputs the heading as normal text in the page HTML, so search engines read your H1 or H2 as written.

Yes, in Elementor. Animation Addons for Elementor is a WordPress plugin, and its Text Animation extension gives you split text animation and heading animation from the Elementor panel, with no GSAP code to write. It works in Elementor pages and templates, not in the block editor.

Yes. It works on Elementor 4's Heading, Paragraph and Button, which ship with Elementor Free, so you don't need Elementor Pro. You need Elementor 4.0 (Editor V4) or newer and Animation Addons Pro.

It depends on your Elementor version and the effect you want. For typing or rotating words in an Elementor 3 widget, Elementor Pro's Animated Headline does that. Most animated heading and animated text widgets for Elementor are separate widgets that replace your heading. For split text effects, 3D presets and scroll-scrubbed fills on Elementor 4's atomic Heading, Paragraph and Button, Text Animation is the text animation addon that adds them to the elements you already use.

It doesn't replay while you change settings. Each interaction row has its own play button that runs that one animation on the canvas, and hover and click rows respond in the editor too. For scroll rows, switch on Markers to see the start and end lines, then turn it off before publishing.

It appears only on Elementor's Heading, Paragraph and Button, and on Animation Addons' Advanced Heading and Post Title. For other widgets, such as an Icon List or Counter, use Regular Animation, or put the text in a Heading.

Your heading stays real text in the page HTML, and Animation Addons Pro adds Reduced Motion and Lazy Animation. Animate headings by character and longer copy by word or line, keep fast randomized effects for short display lines, and avoid looping effects on text people need to read.

It is part of Pro; the free Animation Addons plugin on WordPress.org doesn't include it. Text Animation comes with every Animation Addons Pro plan, along with the other 19 Pro extensions and every Pro element and template. Pro starts at $49 a year for one site, or $29.40 during the Halloween deal until 5 November. See pricing or Free vs Pro.