How to Add Text Animation in the Text Block Widget?

Moving text draws the eye to a headline offer, a quote or a key message. A short animation as the text appears is often enough.

The Text Block widget from The Plus Addons for Elementor animates its own text with GSAP: letters or words can fade in, fly in, scramble, type themselves out or change colour, when the page loads, when the visitor scrolls to them or when the pointer moves over them.

To check the complete feature overview documentation of The Plus Addons for Elementor Text Block widget, click here.

Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

Before You Start

• Edition: Free — the Text Block widget and all its Content, Text Animation and Style settings are part of the free plugin and work the same with Pro.
• Widget to enable: Text Block, switched on under The Plus Addons > Widgets.
• Extension to enable (Global animations only): Text Animation in the Plus Global group under The Plus Addons > Extensions.

How to Add a Basic Text Animation

1. Drag the Text Block widget onto the page and type your text into Content > Description.
2. Open the Text Animation section of the Content tab and switch on Enable Animation.

3. Leave Animation on Basic to set the animation up in this widget.

Setting up a Basic animation, in motion:

4. Choose the effect in Animation Type. The types are described below.

Animation Types

Animation Type	What visitors see
Normal (default)	Each character or word fades in, one after another. With Transform Effects it also moves, scales or rotates into place.
Explode / Scatter	Characters or words fly in from random positions and grow from nothing.
Scramble Text	Random letters, numbers and symbols settle into the real text.
Typing Effect	The text is typed out from the first letter.
Text Style Swap	Characters change, one after another, to the colour and typography set in Style > Text Swap Style, and keep them.

Normal

The text fades in part by part:

Explode / Scatter

The parts fly in from all sides:

Scramble Text

Random characters turn into the real text:

Typing Effect

The text types itself out. Every paragraph is typed at the same time:

Text Style Swap

Pick the new colour and typography in Style > Text Swap Style. This section only appears for this animation type.

Near the end of the animation most characters already have the new colour, and they keep it:

Set Up the Animation

1. For Normal, click the pencil icon next to Transform Effects to set where the text starts from: X Position, Y Position, Skew X, Skew Y, Scale, Rotation and Transform Origin. With Y Position 40 px, every character starts 40 px lower and moves up into place.

2. Choose Split Type: Characters (the default) animates letter by letter, Words word by word. Typing Effect and Scramble Text don’t use it.

3. Choose when the animation starts in Animation Trigger: On Load (the default), On Scroll or On Hover.

4. With On Scroll, switch on Enable Scroll Scrub to tie the animation to the scroll position instead of playing it once. It is available for Normal, Explode / Scatter and Text Style Swap.

5. Click the pencil icon next to Animation Controls to change the timing: Duration (1.2 seconds by default), Delay before the start (0.3 seconds) and Stagger, the time between one character or word and the next (0.04 seconds).

6. Pick the speed curve in Animation Effects, from Power 1 Out (the default) to Elastic Out and Bounce Out. Typing Effect doesn’t use it.

7. Switch on Repeat to loop the animation. A Normal animation fades the text in and out again and again; Typing Effect types the text again from the start.

Use a Global Animation

A global animation is set up once in Site Settings and can then be picked in any Text Block widget. See How to add global GSAP animation in Elementor for the Site Settings part.

1. Switch on the Text Animation extension in the Plus Global group under The Plus Addons > Extensions. Until you do, choosing Global in the widget only shows a note that Text Global Animation is disabled.

2. In the Elementor editor, open Site Settings > Global Text Animations, click Add Global Animation, give it an Animation Name, set it up and click Save Changes.

3. In the Text Block widget, set Animation to Global and choose your animation in Global Animation. The settings saved in Site Settings are used instead of the widget’s own.

Picking a global animation, in motion:

How It Behaves

• Text animation works the same in the free plugin and with Pro. The animation scripts are only loaded on pages where Enable Animation is on.
• Split animations take longer as the text grows. With Characters and the default Stagger, a text of 227 characters took about 10 seconds to finish.
• On Scroll: the text stays hidden until the top of the widget reaches about 70% of the screen height, then plays once.
• Enable Scroll Scrub: the animation follows the scroll position and runs backwards when the visitor scrolls back up.
• On Hover: the text is shown normally. When the pointer moves over it, the animation plays from the start; when the pointer leaves, the full text is back at once. Every new hover plays it again.
• Normal keeps bold text and links.
• With Global chosen but no global animation selected, or the selected one deleted, the text is shown without animation.
• Several animated Text Block widgets on one page run independently.

Limitations

• Typing Effect and Scramble Text remove bold text, italics and links: after the animation the text is plain.
• With Split Type set to Characters, words can be broken across two lines, also after the animation has finished. Words keeps them whole.
• Text set to On Scroll never appears when the widget sits so low on the page that it cannot scroll up to about 70% of the screen height.
• Typing Effect with On Scroll leaves the block empty until the visitor reaches it, so the content below moves when the text is typed.
• If Animation is set to Global while the Text Animation extension is off, the page plays the default Normal character fade.
• The note under Global Animation mentions a Global Scroll Interactions section; the animations are in Site Settings > Global Text Animations.

Troubleshooting

The Global Animation dropdown is missing

Switch on the Text Animation extension under The Plus Addons > Extensions and reload the editor.

The text never appears

With On Scroll, the widget may be too close to the end of the page. Use On Load, or move the widget higher.

Links and bold text are gone

Typing Effect and Scramble Text show plain text. Use Normal for text with links.

Words break in the middle

Set Split Type to Words.

The animation takes too long

Lower Stagger in Animation Controls, or set Split Type to Words.

Related Docs

• Text Block widget settings overview
• Limit word or character count in the Text Block widget
• Add global GSAP animation in Elementor
• Add text animation in the Heading Title widget