Text-Reveal
Word-Exchange Plugin
Bring some Magic
to your Messages
Key Features
- Easily create lightweight text-based animations on the inner texts of core blocks inside Gutenberg
- Animate text elements in paragraphs, headlines, and buttons
- Word-by-Word Reveal for parts of or entire sentences
- Create “blacked out” text effects with reveal animations
- Flexible and multi-functional for various use cases
- Seamless integration with Gutenberg via Rich-Text-Toolbar-Button
Demo
The following text runs the sentence reveal animation from the video above, when it enters the screen
Im Kühlschrank ist fast nur noch Licht
Wir müssen dringend einkaufen
Workflow inside the Gutenberg Editor
The Text Animation Tool adds a new feature to your WordPress Gutenberg editor, allowing you to create dynamic text animations easily.
Select the text you want to animate and choose Animate Texts
Set animation in an Pop-Up
The screenshot shows the options available.
For each word, you can set:
- Text content
- Display duration
- Text color
- Background color
- Line color (for underlines/strikethroughs)
- Line style (solid, wavy, dashed)
- Strikethrough option
- Change order / duplicate / delete words
General Options
- Animation repeat toggle
- Animation trigger
- Start delay adjustment
- Transition duration control
- Animation direction selection
- User-Friendly Controls
The above as a video
The above as a live animation
The animations are completely independent of other style options. In this example, I’ve changed the color to orange and increased the speed.
👉 Easy word lettering animations
Free vs. Paid Version
Free Version
– Basic text animation with clip-in and clip-out effects
– Limited to 2 text replacements (original text + 1 replacement)
– Simple repeat and delay options
– Works with paragraphs and headings
Pro Version
All features of the free version, plus:
– Unlimited text replacements
– Advanced color customization (text, background, and line colors)
– Multiple clip types (right, left, top, bottom)
– Line type options (solid, wavy, dashed)
– Line-through effect
– Custom timing for each text replacement
– Option to prevent animation restart on re-entry
One-Time Payment, no recurring costs!
Use it on as many site as you like!
How It Works (technically)
The plugin adds a RichTextToolbarButton (Animate-Texts) to the Gutenberg editor, allowing you to select text and add animation properties. It uses classes and data attributes to control animations in the frontend, with an IntersectionObserver to trigger animations when elements enter the viewport.
Colored Boxes to Text Animations
Create colored boxes by setting the background color of a span and matching its text color.
Animate Text-Links?
Actually its better to use Buttons with it.
Text-Links need careful text-selection. It can be done when you set the markers of the link first. Then inside the linked text you need to select the text parts again and then you can add animations. This is not recommended.
FAQs
Why you will not find this plugin on the official WordPress plugin directory?
Since the manual plugin approval process from the plugin review team takes quite a while (weeks) and forces you to submit all your source code or implement a “freemium” version (one of these plugins annoying you with messages saying “buy pro”), I’ve decided not to publish my plugins there anymore.
What does the Text-Exchange and Lettering Animation plugin do?
The plugin allows you to create dynamic text animations in WordPress. It can animate text elements in paragraphs, headlines, and buttons, using clip-path animations to reveal and hide the text. The exchange of text elements is done by JavaScript.
How does the plugin work with Gutenberg?
The plugin adds a RichTextToolbarButton to the Gutenberg editor. This allows you to select text and apply animations directly within the editor. It’s seamlessly integrated with Gutenberg, making it easy to use with your existing content. Without Gutenberg the plugin is not working.
What’s the difference between the free and paid versions?
The free version offers basic text animation features, while the paid version includes advanced options like unlimited text replacements, custom colors, multiple clip types, line effects, and more customization options in the Gutenberg editor.
How much does the plugin impact page load times?
The plugin is designed to be lightweight, adding only around 2KB of JavaScript code and 1.5KB of CSS to your frontend. This minimal footprint ensures that your website’s performance is not significantly affected.
How much does the plugin impact page load times?
Yes, the plugin works with all text elements in the editor, including buttons and links. When animating text in links, it’s important to set the link first, then apply the animation, and be precise when selecting the text elements.
How does the animation work behind the scenes?
The plugin uses a combination of JavaScript and CSS to create the animations. It leverages the Intersection Observer API to trigger animations when elements enter the viewport, ensuring efficient performance.
What does the server-side PHP do in this plugin?
The server-side PHP is extremely lightweight. It only adds the required WordPress plugin frontmatter and enqueues one CSS and JS file each for the frontend and backend/editor.
Is the plugin secure?
Absolutely. The plugin contains no harmful code, doesn’t send out any data, and doesn’t include third-party scripts or services. It’s designed with security in mind.
Explore the versatility of our text animation plugin
- Writing effects: Create a “typing” illusion
- Use word-by-word reveal for narrative effects
- Animate button text to draw attention
The possibilities are endless – let your creativity flow!
See a example below
BLACKEDOUT NEWSPAPERS
- Start with a newspaper article or page
- Identify words or phrases that resonate with you
- Use a marker to black out the rest of the text, leaving only your chosen words visible
- The remaining words form your new poem