Effects · Gutenberg
Animated Text block for WordPress
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Inspector panels on this block: Words / Phrases, Animation, Text & Layout, Word Highlight. Those titles come from index.js, not from a shared template.
Behavior controls: “Effect” options: Typewriter, Fade, Slide Up, Slide Down, Flip / Rotate; “Text Alignment” options: Left, Center, Right; “Word Placement” options: Inline (same line), New Line (block).
Where to find it
Gutenberg inserter → Effects → search “Animated Text” (block name `blockenberg/animated-text` in block.json). Style it in the sidebar after insert.
How to use Animated Text block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Animated Text”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Words / Phrases. Set “Effect”, “Typing Speed (ms/char)”, “Deleting Speed (ms/char)”, “Pause Duration (ms)”.
- Check the published page. The view script reads HTML data attributes: data-cursor, data-cursor-char, data-deleting-speed, data-effect, data-loop, data-pause, data-typing-speed, data-words. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Effect | Select control; the chosen value is saved on the block. Options: Typewriter; Fade; Slide Up; Slide Down; Flip / Rotate; Zoom; Blur. block.json default: typewriter. Saved as `effect`. |
| Typing Speed (ms/char) | Numeric range control in the inspector. Range 20–300. block.json default: 80. Saved as `typingSpeed`. |
| Deleting Speed (ms/char) | Numeric range control in the inspector. Range 10–200. block.json default: 40. Saved as `deletingSpeed`. |
| Pause Duration (ms) | Numeric range control in the inspector. Range 500–6000. block.json default: 2000. Saved as `pauseDuration`. |
| Loop Continuously | On/off toggle in the inspector. On by default. Saved as `loop`. |
| Show Cursor | On/off toggle in the inspector. On by default. Saved as `showCursor`. |
| Cursor Character | Text field in the inspector. block.json default: |. Saved as `cursorChar`. |
| Cursor Blink Speed (ms) | Numeric range control in the inspector. Range 200–1500. block.json default: 530. Saved as `cursorBlinkSpeed`. |
| HTML Tag | Select control; the chosen value is saved on the block. block.json default: h2. Saved as `tag`. |
| Text Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `textAlign`. |
| Word Placement | Select control; the chosen value is saved on the block. Options: Inline (same line); New Line (block). block.json default: inline. Saved as `wordPlacement`. |
| Max Width (px, 0 = none) | Numeric range control in the inspector. Range 0–1400. block.json default: 0. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `wrapperPaddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `wrapperPaddingBottom`. |
| Highlight Padding (px) | Numeric range control in the inspector. Range 0–24. block.json default: 4. Saved as `highlightPadding`. |
| Highlight Border Radius (px) | Numeric range control in the inspector. Range 0–20. block.json default: 4. Saved as `highlightRadius`. |
| Heading Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `headingTypo`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-cursor, data-cursor-char, data-deleting-speed, data-effect, data-loop, data-pause, data-typing-speed, data-words.
When this is the right block
- Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections — that is the job of Animated Text, not a generic content block.
- Use it when you need the editor control labeled “Effect”, which exists on this block’s inspector.
- It matches pages about animated, typewriter, typing.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Animated Text block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Animated Text”. It sits under Effects. After insert, open Words / Phrases and set “Effect”, “Typing Speed (ms/char)”, “Deleting Speed (ms/char)”, “Pause Duration (ms)”.
What makes Animated Text different from other Blockenberg blocks?
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections. Inspector labels on this block include “Effect”, “Typing Speed (ms/char)”, “Deleting Speed (ms/char)”, “Pause Duration (ms)”.
Is the Animated Text Gutenberg block free?
Yes. Animated Text ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Animated Text to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Words / Phrases, Animation, Text & Layout, Word Highlight).
Related effects blocks
Typing Effect
Animated typewriter text that cycles through multiple phrases with a blinking cursor.
Morphing Text
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
Word Flip
Headline with a vertically flipping word that cycles through alternatives — like a slot machine or departure board embedded in text.
Gradient Text
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation.
Split Text
Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport.
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Animated Text from the Gutenberg inserter.