Animated Text

The Animated Text element cycles a list of phrases in the middle of a sentence — a headline that types itself out, a rotating text that swaps one word for the next, or a glitch effect on a single line. The static parts of the sentence stay put while only the animated part changes.

Adding the element

Add an element in the YOOtheme Pro builder and pick Animated Text from the Planckie Elements group. The builder starts you with three phrases so the animation runs immediately.

The element loads its own stylesheet and script, and only on pages that actually use it. The first phrase is already in the HTML, so the line is readable before the script runs and does not jump when it does.

Content

Option	Description
Text Before	Static text in front of the animated part. Add a trailing space if you want a gap.
Text After	Static text behind the animated part. Add a leading space if you want a gap.
Items	The phrases to cycle through.

The element emits no whitespace of its own between the three parts, so the spacing is entirely yours. We build + websites needs the trailing space; three followed directly by a cursor does not.

Animated text items

Option	Description
Text	One phrase. Line breaks are collapsed into single spaces, because the phrase is animated on one line.

Settings

Animation and Timing

This group holds the animation and everything measured in milliseconds. Fields that belong to another animation disappear from the panel.

Option	Description
Animation	Typewriter (the default), Fade-Slide, Flip, Scramble or Glitch.
Type Speed (ms/char)	20 to 200, 80 by default. Typewriter only.
Delete Speed (ms/char)	20 to 200, 40 by default. Typewriter only.
Pause Before Deleting (ms)	500 to 5000, 1500 by default. Typewriter only, and only while the animation continues.
Show cursor	On by default. Typewriter only.
Cursor Character	Left empty, it reads `
Transition Duration (ms)	200 to 2000, 500 by default. Every animation but Typewriter. Under Scramble it sets how long the scrambling runs.
Transition Direction	Up (the default), Down, Left or Right. Fade-Slide only.
Display Duration (ms)	500 to 8000, 2000 by default, measured from the moment a phrase is fully shown. Every animation but Typewriter.
Start Delay (ms)	0 to 5000, 0 by default, counted from when the element enters the viewport, not from page load.
Loop	On by default. Off runs the list once and leaves the last phrase on screen.

What the five animations do:

• Typewriter types the phrase one character at a time, waits, deletes it the same way and moves on. With Loop off it types the last phrase and stops; the cursor keeps blinking.
• Fade-Slide fades the old phrase out and the new one in, offset by 0.4em in the direction you choose.
• Flip rotates the phrase on its horizontal axis, in a 400-pixel perspective.
• Scramble reveals the phrase from left to right out of random characters. Each character scrambles within its own kind — lowercase into lowercase, uppercase into uppercase, a digit into digits — and spaces, punctuation and symbols are left alone. Latin phrases scramble through the Latin alphabet plus any accented characters they use; a phrase in another script scrambles through the characters that phrase brings with it, so Cyrillic stays Cyrillic and Greek stays Greek.
• Glitch shakes the phrase for the transition duration, with magenta and cyan layers sliding the other way, then swaps to the next phrase with no exit animation.

A single phrase still animates when Loop is on: the typewriter retypes it, the others play their transition again.

Text

Option	Description
Style	A heading or text style of the active theme style, from Heading 3X-Large down to Text Small.
Color	Muted, Emphasis, Primary, Secondary, Success, Warning or Danger.
HTML Element	div by default, or p, h1 to h6, or span.

Build the sentence with Text Before and Text After rather than with separate elements around this one, and the whole line stays on one baseline. Span turns the element inline, which switches off the margins, maximum width and alignment from the General group — the option for dropping the animation into a line written elsewhere.

General and Advanced

The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element:

.pe-animated-text, .pe-animated-text-before, .pe-animated-text-value, .pe-animated-text-cursor, .pe-animated-text-after

.pe-animated-text-value is the animated part, the other three the static text around it and the cursor.

Two CSS custom properties have no field and can only be set here:

Property	Effect
--pe-animated-text-glitch-color-1	The first glitch layer, magenta by default.
--pe-animated-text-glitch-color-2	The second glitch layer, cyan by default.

Set them on .pe-animated-text to fit the glitch to your palette. The other custom properties the element uses — the transition duration and the slide offset — are written into the element's inline style from the fields above, so change those in the panel rather than in CSS.

Accessibility and reduced motion

The animated part is aria-hidden, and all the phrases are rendered in full in a visually hidden span next to it. A screen reader therefore reads the sentence once, with every phrase in it, instead of announcing single characters as they are typed. Search engines see the same text.

Motion stops entirely for visitors who have reduced motion enabled in their system settings: the element shows the first phrase and the cursor stops blinking. Switching the preference on or off applies immediately, with no page reload. The animation also pauses while the element is scrolled out of view and picks up the current phrase when it comes back.

Notes and limits

• The element renders nothing unless at least one phrase has text. Empty items are skipped rather than animated as blanks.
• The animated part is inline text with no reserved width, so a longer phrase pushes Text After along the line. Put the animated part at the end of the sentence, or keep the phrases close in length, if you would rather nothing moved.
• Scramble builds its random characters from the phrases themselves once the script is outside Latin and the digits 0–9. A short phrase in such a script therefore has few characters to shuffle — two Japanese characters can only swap with each other — so give it a few phrases if you want the effect to look busy.
• The glitch colors are magenta and cyan until you override them in Custom CSS. They are deliberate rather than theme-derived; the effect depends on the two layers being clearly different from the text color.