---
title: "How to Add Text Animation in the Text Block Widget?"
url: https://theplusaddons.com/docs/add-text-animation-in-the-text-block-widget/
date: 2026-01-28
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2026/01/How-to-Add-Text-Animation-in-the-Text-Block-Widget-1024x538.jpg
word_count: 1164
---

# How to Add Text Animation in the Text Block Widget?

## 

- The Text Block widget from The Plus Addons for Elementor animates letters or words with GSAP, using effects like fade in, fly in, scramble, typing, or colour change.
- Animation Trigger offers On Load, On Scroll, and On Hover, and Enable Scroll Scrub ties the motion to scroll position for Normal, Explode / Scatter, and Text Style Swap.
- Split Type switches between Characters and Words, while Typing Effect and Scramble Text do not use it and can remove bold text, italics, and links.
- Global Animation is set in Site Settings > Global Text Animations after switching on the Text Animation extension under The Plus Addons > Extensions, then the widget can reuse that saved animation.

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](https://theplusaddons.com/docs/advanced-text-block-elementor/).*

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-text-block/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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

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

![Enable Animation switched on in the Text Animation section of the Text Block widget](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-enable-animation.webp)

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

![Animation set to Basic in the Text Animation section](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-animation.webp)

Setting up a Basic animation, in motion:

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

![The Animation Type dropdown set to Normal in the Text Animation section](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-animation-type.webp)

## 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:

![A Normal animation halfway through: the start of each paragraph is visible, the rest still fading in](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-result-anim-normal-mid.webp)

### Explode / Scatter

The parts fly in from all sides:

![An Explode / Scatter animation halfway through, with letters scattered around the text](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-result-anim-explode-mid.webp)

### Scramble Text

Random characters turn into the real text:

![A Scramble Text animation near its end, with random characters at the end of each paragraph](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-result-anim-scramble-mid.webp)

### Typing Effect

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

![A Typing Effect animation halfway through, with both paragraphs partly typed](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-result-anim-typing-mid.webp)

### Text Style Swap

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

![The Text Swap Style section in the Style tab with Typography and a red Text Color](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-swap-style.webp)

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

![Text Block text on the page near the end of a Text Style Swap animation, most characters already red](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-result-anim-swap-end.webp)

## Set Up the Animation

- 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.

![The Transform Effects popover open with Y Position set to 40 px](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-transform.webp)

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

![Split Type set to Characters in the Text Animation section](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-split-type.webp)

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

![Animation Trigger set to On Scroll, with Enable Scroll Scrub shown below it](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-trigger.webp)

- 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.

![Enable Scroll Scrub switched on under Animation Trigger](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-scrub.webp)

- 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).

![The Animation Controls popover with Duration 1.2, Delay 0.3 and Stagger 0.04](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-controls.webp)

- 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.

![Animation Effects set to Power 1 Out in the Text Animation section](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-ease.webp)

- 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.

![The Repeat switch at the end of the Text Animation section](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-repeat.webp)

## 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](https://theplusaddons.com/docs/add-global-gsap-animation-in-elementor/) for the Site Settings part.

- 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.

![Animation set to Global with the note that Text Global Animation is disabled and a Click here to enable link](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-global-notice.webp)

- 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**.

![Site Settings open on Global Text Animations with an animation named Hero typing set to Typing Effect](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-site-settings.webp)

- 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.

![Animation set to Global and Global Animation set to Hero typing in the Text Block widget](https://theplusaddons.com/wp-content/uploads/2026/09/advtext-global-select.webp)

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](https://theplusaddons.com/docs/advanced-text-block-elementor/)- [Limit word or character count in the Text Block widget](https://theplusaddons.com/docs/limit-wordcount-text-widget-elementor/)- [Add global GSAP animation in Elementor](https://theplusaddons.com/docs/add-global-gsap-animation-in-elementor/)- [Add text animation in the Heading Title widget](https://theplusaddons.com/docs/add-text-animation-in-the-heading-title-widget/)