--- title: "How to Add Animated Text in WordPress?" url: https://nexterwp.com/docs/add-animated-text-in-wordpress/ date: 2024-11-29 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "Text that assembles itself as the reader arrives draws the eye to the one line on the page that most deserves it. Style 9 of the Advanced Heading splits the..." image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-Animated-Text-in-WordPress_-1024x519.jpg word_count: 814 --- # How to Add Animated Text in WordPress? ## Key Takeaways - Advanced Heading Style 9 en Nexter Blocks divide el título en words, characters o lines y anima las piezas al entrar, con un retraso entre piezas que crea el efecto escalonado. - Nexter Blocks muestra Style 9 solo en el título, y un sub-title o un extra title no aparecen en la página; si se necesita sub-title, se usa otro estilo. - Advanced Heading conserva la etiqueta de encabezado elegida, de H1 a H6, y la animación no afecta al esquema del documento. - El límite de caracteres cuenta bytes, no caracteres, así que los títulos no ingleses pueden cortarse mal; con Word en lugar de Character, el mismo título hindi permanece intacto. Text that assembles itself as the reader arrives draws the eye to the one line on the page that most deserves it. Style 9 of the Advanced Heading splits the title into words, letters or lines and animates the pieces into place. *For every Advanced Heading setting in one place, see the [main Advanced Heading guide](https://nexterwp.com/docs/add-an-advanced-heading-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-heading/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Advanced Heading, switched on under **Nexter > Blocks** in your WordPress dashboard.- An **Advanced Heading** block on the page — see the [main Advanced Heading guide](https://nexterwp.com/docs/add-an-advanced-heading-in-wordpress/). ## Video Tutorial ## Steps - Select the **Advanced Heading** block and set **Style** to **Style 9**. ![The Advanced Heading set to style 9](https://nexterwp.com/wp-content/uploads/2024/11/advanced-heading-animated-split-text-options-demo.gif) - Choose the **Split Type**: words, characters or lines. - Pick the **animation effect**, and set the movement, scale or rotation you want the pieces to arrive from. - Set the **speed** and the **delay** between pieces — the delay is what gives the staggered effect. - Publish and view the real page — the animation does not run in the editor. > ***Style 9 shows the title only.** Measured with a sub-title and an extra title both filled in: neither appeared anywhere on the page. If you need a sub-title, use one of the other styles.* ## How It Behaves The Advanced Heading block is a heading with the parts a designed heading usually needs — a title, a sub-title, a small extra label, a separator and a link — in one block, with nine styles to arrange them. - **The split type is written into the page.** Measured: choosing words, characters or lines put that choice on the heading element, and lines is recorded as `lines,chars` because the text is split twice to animate whole lines made of letters.- **The animation settings travel with the heading** — measured, effect, movement, scale, rotation, opacity, speed and delay are all written onto the element as one block of data, with a default speed of 1 and a delay of 0.02 between pieces.- **Style 9 shows the title only.** Measured with a sub-title and an extra title both filled in: neither appeared anywhere on the page. If you need a sub-title, use one of the other styles.- **The title still uses your chosen heading tag** — measured, style 9 keeps the H1 to H6 you picked, so animating a heading does not cost you the document outline.- Measured with Nexter Blocks Pro deactivated: the block renders identically. It is a free block. ## Limitations - **Style 9 shows the title only.** Measured with a sub-title and an extra title both filled in: neither appeared anywhere on the page. If you need a sub-title, use one of the other styles.- **It animates one heading, not a rotating list of phrases.** For a heading that cycles through several words, use [the Heading Animation block](https://nexterwp.com/docs/add-animated-headings-in-wordpress/) instead.- **Nothing runs in the editor** — the effect has to be checked on the published page.- **Splitting by letter multiplies the elements** in a long heading, which is worth keeping in mind for very long titles.- **The character limit counts bytes, not characters, so it is unsafe for non-English titles.** Measured with the limit set to 8: an English title was cut to 8 characters correctly, an accented title was cut to only 5, and a Hindi title came out with a broken character on the page. **Use *Word* rather than *Character* for any title that is not plain English** — measured, word mode left the same Hindi title completely intact. This is reported to the development team. ## Troubleshooting ### Nothing animates Check **Style** is set to 9 and that you are looking at the published page. Measured: the animation attributes are only written in style 9, and the effect runs on the front end. ### My sub-title vanished when I switched to style 9 **Style 9 shows the title only.** Measured with a sub-title and an extra title both filled in: neither appeared anywhere on the page. If you need a sub-title, use one of the other styles. ### The letters arrive all at once The delay between pieces is what staggers them. Measured, it defaults to 0.02 seconds — increase it for a more pronounced effect. ### I want each word to appear separately, not each letter Set **Split Type** to words. Measured, that is recorded on the heading and animates whole words. ### My non-English heading is cut strangely **The character limit counts bytes, not characters, so it is unsafe for non-English titles.** Measured with the limit set to 8: an English title was cut to 8 characters correctly, an accented title was cut to only 5, and a Hindi title came out with a broken character on the page. **Use *Word* rather than *Character* for any title that is not plain English** — measured, word mode left the same Hindi title completely intact. This is reported to the development team. ## Related Docs - [Add an advanced heading in WordPress](https://nexterwp.com/docs/add-an-advanced-heading-in-wordpress/)- [Add animated headings in WordPress](https://nexterwp.com/docs/add-animated-headings-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before adding animated text in WordPress?** A: The setup is simple: the Advanced Heading block must be enabled under Nexter > Blocks, and you need an Advanced Heading block already on the page. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides this as a free block in Nexter Blocks, and it also works with Nexter Blocks Pro. That matters because the animation is tied to that block, not to a separate plugin or editor effect. **Q: Why does the animated text not move in the editor?** A: The animation only runs on the published page, not inside the editor. In practice that means a static preview in the builder is expected, so testing in the editor can look broken even when the setup is correct. The page also notes that Style 9 writes the animation attributes only there, so if nothing moves on the front end, Style 9 and the published view are the two things to verify first. **Q: How do I make each word appear separately instead of each letter?** A: Set Split Type to words. That choice is written onto the heading element and animates whole words instead of individual letters. This is usually the better option for longer headings because letter-by-letter splitting creates many more pieces and can feel noisy. The page also notes that split type can be words, characters, or lines, so words is the cleanest choice when you want readable staggered motion. **Q: Why did my sub-title disappear after switching to Style 9?** A: Style 9 shows only the title. The page measured this with both a sub-title and an extra title filled in, and neither appeared anywhere on the page. If your heading needs a sub-title or extra label, another style is required. That behavior is specific to Style 9, so it is not a rendering bug in your content. **Q: How do I fix animated text that arrives all at once?** A: The stagger comes from the delay between pieces. The default delay is 0.02 seconds, which can be too subtle for some headings or too fast to notice on short text. Increasing that delay makes each word or letter separate more clearly as it animates into place. The speed setting also travels with the heading, so timing is part of the same block data. **Q: Is animated heading text safe for non-English titles?** A: Character mode is risky for non-English titles because the limit counts bytes, not characters. The page measured an English title cutting correctly at 8 characters, but an accented title cut to only 5 and a Hindi title showed a broken character. Word mode kept the same Hindi title intact, so it is the safer choice for anything that is not plain English.