Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Free

Animated Title for Elementor A title you can animate by letter, word or line

The Elementor animated title widget lets you write a title, wrap a word in square brackets to highlight it and add a prefix line. With Animation Addons Pro, Elementor title animation brings the same title in letter by letter, word by word or line by line as visitors scroll, or ties it to their scroll. The widget itself is free.

Try it free See the live demos
  • Free widget on WordPress.org
  • Highlight with [ ]
  • 7 text animations with Pro
  • On scroll or scroll-linked

Classic widget · Elementor 3 and 4Updated

Live demos

Every title animation, live

Eight title animations on eight small sites. Titles marked Play with scroll follow your scroll inside the frame. The others play once as they come into view. Press Play or Replay to see them again.

Maison FormeProjectsStudioJournal

Quiet

Spaces

Interiors for small homes and studios, planned around light, storage and the way you live.

Book a visitSee projects
Hero title

Hero title, scale by line

The hero of an interior studio. The serif title has two parts: Quiet in a dashed box, and Spaces with a hand-drawn swash. Each part scales down from 1.5 into place with a soft bounce.

Press Replay

Set Animation to Text Scale and Trigger to On Page Load. Use a Duration of 1.2, a Delay of 0.4 on the first part and 0.5 on the second.

Arolax®WorkType labContact

Design Animation

Character animation, Transform X

Design Animation

Character animation, scrub X, play with scroll

Play with scroll

Design Animation

Character animation, Transform Y

Design Animation

Character animation, scrub Y, play with scroll

Play with scroll
Scroll back up and the scroll-linked titles play in reverse.
Display headline

Type specimen, letter by letter

A type specimen page. Each letter fades in from the side or from below, one after another. The scroll-linked rows build the word as you scroll and take it apart when you scroll back.

Scroll inside the frame

Set Animation to Character, Transform-X to 50 (or Transform-Y for the rows that come from below), Duration to 1.2 and Stagger to 0.05. Choose Trigger On Scroll or Play With Scroll.

HaldenServicesWorkAbout

We help small teams launch websites that load fast, read well and feel alive on every screen.

Word animation, Transform X

We help small teams launch websites that load fast, read well and feel alive on every screen.

Word animation, Transform X, play with scroll

Play with scroll

We help small teams launch websites that load fast, read well and feel alive on every screen.

Word animation, Transform Y

We help small teams launch websites that load fast, read well and feel alive on every screen.

Word animation, Transform Y, play with scroll

Play with scroll
Scroll back up and the scroll-linked titles play in reverse.
Intro statement

Services intro, word by word

The intro of a web studio. Whole words slide in from the side or rise from below, so a long sentence stays easy to read while it appears.

Scroll inside the frame

Set Animation to Word, Transform-X or Transform-Y to 50, Duration to 1.2 and Stagger to 0.04.

Medica ClinicDoctorsCareContact

Every visit starts with a short call, a clear plan and a doctor who knows your name.

Text Move, rotation X

Every visit starts with a short call, a clear plan and a doctor who knows your name.

Text Move, rotation X, play with scroll

Play with scroll

Every visit starts with a short call, a clear plan and a doctor who knows your name.

Text Move, rotation Y

Every visit starts with a short call, a clear plan and a doctor who knows your name.

Text Move, rotation Y, play with scroll

Play with scroll
Scroll back up and the scroll-linked titles play in reverse.
Statement or quote

Clinic statement, lines turn in

A statement on a clinic site. Each line swings in from -80 degrees in 3D, around the horizontal or the vertical axis, like a page turning into place.

Press Play

Set Animation to Text Move, Rotation Direction to X or Y, Rotation Value to -80 and Stagger to 0.04.

ShallyShopJournalAbout

Good design is quiet. It answers your questions before you think to ask them.

Text Reveal animation

Good design is quiet. It answers your questions before you think to ask them.

Text Reveal, play with scroll

Play with scroll
Scroll back up and the scroll-linked titles play in reverse.
Editorial heading

Journal heading, letters rise

A line from a fashion journal. Letters rise 80 px from behind the edge of their line, as if a mask slides away, with a quick start and a soft landing.

Press Play

Set Animation to Text Reveal, Duration to 1.2 and Stagger to 0.02. Use Trigger On Scroll, or Play With Scroll to follow the scroll bar.

MalepèreWinesEstateVisit

Text Scale animation

Your brand deserves a website that moves with purpose, not just for show.

Scale down, break by line

Your brand deserves a website that moves with purpose, not just for show.

Scale down by line, play with scroll

Play with scroll

Your brand deserves a website that moves with purpose, not just for show.

Scale up, break by line

Your brand deserves a website that moves with purpose, not just for show.

Scale up by line, play with scroll

Play with scroll

Your brand deserves a website that moves with purpose, not just for show.

Scale down, break by word

Your brand deserves a website that moves with purpose, not just for show.

Scale down by word, play with scroll

Play with scroll

Your brand deserves a website that moves with purpose, not just for show.

Scale down, break by letter

Your brand deserves a website that moves with purpose, not just for show.

Scale down by letter, play with scroll

Play with scroll
Scroll back up and the scroll-linked titles play in reverse.
Slogan or feature line

Winery slogan, text scales in

A slogan on a winery site. The text scales down from 1.5 or up from 0.1 into place, by line, by word or by letter, with a slight overshoot at the end.

Scroll inside the frame

Set Animation to Text Scale, Duration to 1.2 and Stagger to 0.02, then pick the scale and whether it breaks by lines, words or letters.

Sahara FilmsFilmsStudioContact

Scroll inside the frame: each line fills with colour as it moves up.

Text Invert animation

We design and build websites for brands that care about every detail, from the first sketch to the last line of code.

Scroll back up and the lines fade again.
About text

Studio manifesto, lines fill in

The about text of a film studio. Faded lines fill with full colour as they move up the screen, tied to the scroll, so the paragraph reads as you scroll.

Scroll inside the frame

Set Animation to Text Invert. It is tied to the scroll, so each line fills as it moves up.

NorthlightFilmsFestivalTickets

Animation

3D spin text animation

Animation

3D spin, play with scroll

Play with scroll
Scroll back up and the scroll-linked titles play in reverse.
Big display word

Festival word, 3D spin

A large word on a festival page. It rolls over like the side of a cube: a copy turns in from below while the original turns away, letter by letter.

Press Play

Set Animation to 3D Spin and Trigger to On Scroll, or Play With Scroll to follow the scroll bar.

Features

Key features of the Animated Title

Each feature is tied to a real setting. The text animations need Animation Addons Pro.

Multiple animation modes

Animate by letter with Character, by Word, or the whole text by line with Text Move, Text Reveal and Text Scale. Character is an Elementor character animation for short headlines.

Text move and reveal effects

Swing lines in with Text Move, slide letters up from a mask with Text Reveal, scale with Text Scale, or use Text Invert as an Elementor text invert animation that fills lines on scroll.

3D spin effects

Make a big word roll over like a cube with 3D Spin, an Elementor 3D text animation that plays on scroll, on a click or tied to the scroll.

Staggered motion

Set the Delay, Duration and Stagger, the time between one letter, word or line and the next.

Transform controls

Move the text in from any side with Transform-X and Transform-Y, or set the Rotation Direction, Rotation Value and transformOrigin for Text Move.

Title animation on scroll

For Elementor title animation on scroll, play the animation once as the title comes into view, or tie it to the scroll so it plays forward and back with the page.

Highlight and prefix, free

Wrap words in [ ] for an Elementor highlight text in heading effect, with its own Color, Background and Typography. Turn on Show Prefix for an Elementor heading with prefix, always or on hover.

Style every part of the title

The title has Text Color, Typography, Text Stroke, Text Shadow and Blend Mode. The highlight and the prefix have their own settings, and the Hover section changes the colours on hover.

Step by step

How to animate a title in Elementor

Five steps, no code. The bold names are the labels in the Elementor panel.

  1. Install Animation Addons for Elementor from WordPress.org and turn on Animated Title. Add Animation Addons Pro for the text animations.

  2. Drag Animated Title into your section, type the Title and wrap any word in [ ] to highlight it.

  3. Choose the HTML Tag and Alignment, and turn on Show Prefix if you want a line before the title.

  4. Open Text Animation, pick Character, Word, Text Move, Text Reveal, Text Scale, Text Invert or 3D Spin, and set the Delay, Duration and Stagger.

  5. Choose when it plays, on scroll or with the scroll, style the title in the Style tab and publish.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about the Animated Title

How do I animate a title in Elementor?

Add the Animated Title widget, type your title, then open its Text Animation section and choose an effect such as Character or Word. The text animations come with Animation Addons Pro.

Is the Animated Title widget free?

Yes. The widget, with highlights, the prefix line and all its style settings, is part of the free Animation Addons plugin. The Text Animation effects need Animation Addons Pro.

Is there a free Elementor heading animation?

Partly. For an Elementor heading animation free of cost, the widget and its highlight and prefix are free, and Elementor's own Heading has a free entrance animation. Letter, word and line animation needs Animation Addons Pro.

Which text animations can I use?

Seven: Character, Word, Text Move, Text Reveal, Text Scale, Text Invert and 3D Spin. Each has its own settings, such as Transform-X and Y, rotation or scale.

What is the difference with play with scroll?

On scroll plays the animation once when the title comes into view. Play with scroll ties it to the scroll position, so it moves forward as you scroll down and back as you scroll up.

How do I highlight one word in the title?

Wrap the word in square brackets, for example Design that [moves]. Then style it under Highlight with its own colour, background, typography, stroke and shadow.

Can a button play the title animation?

Yes. Set the trigger to click or hover and enter the CSS selector of the element that starts it, as the Play buttons do on this page.

How is it different from the Animated Heading?

The Animated Heading loops a bounce and colour change on every letter. The Animated Title plays an entrance or a scroll-linked animation once, and adds highlights and a prefix.

Is it the same as the Elementor Animated Headline?

No. The Elementor Animated Headline is a widget of Elementor Pro that rotates or highlights words. The Animated Title is a free Animation Addons widget that animates the whole title.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets. For Elementor 4 headings, the Text Animation extension adds the same kind of effects.

Animation Addons Pro · Elementor 4

Titles that tell a story

Highlights, prefix lines and letter, word and line animation for every Elementor title.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license