An animated heading is one of the quickest ways to make the top of a page feel alive, because the movement lands exactly where a visitor is already looking.
The Heading Title widget’s Animated Split style breaks the heading into words, characters or lines and animates each piece into place as the page loads.
To check the complete feature overview documentation of The Plus Addons for Elementor Heading Title widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Heading Title widget is free, but the Animated Split style needs The Plus Addons for Elementor Pro.
- Widget to enable: Heading Title, under The Plus Addons > Widgets. Search for it and turn the toggle on.
- Prerequisite: a heading long enough to see the split — two or more words works best.
Steps
- Add the Heading Title widget to the page.
- In Layout, set Style to Animated Split. The panel changes: the sub title, extra title and limit settings go away, because this style does not use them.
- Type your heading into Heading Title in the Content section.
- Back in Layout, choose a Type. This is what gets animated separately: Word (the default), Character or Line.
- Open the Animated Split Text Options section and tune the motion (see the table below).
- Preview the page. Each piece fades and moves into place in turn.
Animated Split Text Options
| Setting | What it does | Default |
|---|---|---|
| Animation Effect | The GSAP easing curve, from Power 0 easeNone through the Power 1–4 variants to Back, Elastic and Bounce. | Default |
| X, Y, Z | How far each piece travels on that axis before settling. | 0 |
| Scale | The size each piece starts at. | 0 |
| Rotate | How far each piece is rotated before settling. | 0 |
| Speed | Seconds the animation takes. Range 0.01 to 3. | 1 |
| Delay | Seconds to wait before it starts. | 0 |
The Animated Split Text section on the Style tab sets the Title Tag, an optional Heading Title Link, typography and colour for this style.
How It Behaves
- The animation runs once, on page load. It is not a scroll-triggered animation.
- Each piece starts invisible and offset, then fades and moves into its final position in sequence, so the heading reads left to right as it arrives.
- Line animates whole lines as they wrap at the current width, so the number of animated pieces changes between desktop and mobile.
- Animated Split replaces the normal heading layout. There is no sub title, extra title, separator or word limit while it is selected.
Limitations
- This style needs The Plus Addons for Elementor Pro. With only the free plugin a heading already set to Animated Split renders as a plain, static heading — no split, no motion and no warning.
- With Type set to Character, the spaces between words are dropped: “Animated Headings” renders as “AnimatedHeadings”. This was checked on the front end in 6.5.0. Use Word or Line when the heading has more than one word.
- The separate Title Text Animation section does not apply to this style. For animation on the ordinary heading styles, use the text animation doc instead.
Troubleshooting
The heading appears instantly with no animation
Check that The Plus Addons for Elementor Pro is active, and view the real page rather than the editor canvas. A page cache that serves a stale copy of the stylesheet can also swallow it.
The words are running together
Type is set to Character, which drops the spaces in 6.5.0. Switch it to Word.
There is no Sub Title field any more
That is expected. Animated Split has no sub title. Switch Style back to Modern if you need one.
The animation is too fast to read
Raise Speed in Animated Split Text Options. It accepts up to 3 seconds.
