Animated text transitions — letters morph to their new positions.

Daiv Mowbray

SuperSlider-Excerpt

SuperSlider-Excerpts automatically pulls thumbnails from your posts and morph-animates the roll over to any css style, wherever you show excerpts (arc …

Michael Rademacher

TextTweener is a Gutenberg block that creates smooth, animated text transitions. Individual letters morph and move to their new positions, creating an elegant text rotation effect.
Live Demo: <a href="https://realmaker.de/texttweener/" rel="nofollow ugc">https://realmaker.de/texttweener/</a> — see the animation in action before installing.
Source Code & Build Instructions:
The minified file <code>assets/texttweener.umd.min.js</code> is built from the TypeScript source at: 
<a href="https://github.com/Realmaker/textTweener" rel="nofollow ugc">https://github.com/Realmaker/textTweener</a>
To build from source:
<ol>
<li>Clone the repository: <code>git clone https://github.com/Realmaker/textTweener.git</code></li>
<li>Install dependencies: <code>npm install</code></li>
<li>Build: <code>npm run build</code></li>
</ol>
The compiled output is generated in <code>dist/</code> using <a href="https://tsup.egoist.dev/" rel="nofollow ugc">tsup</a> (ESBuild-based bundler). The build configuration is in <code>tsup.config.ts</code>.
Features:
<ul>
<li>Smooth letter-by-letter animation between text phrases</li>
<li>Customizable display duration, transition speed, and stagger</li>
<li>Multiple easing presets (Smooth, Ease Out, Bounce, Linear)</li>
<li>Add as many text phrases as you need</li>
<li>Responsive and works with any WordPress theme</li>
<li>No jQuery dependency</li>
<li>No-JavaScript fallback for accessibility</li>
</ul>
Usage:
<ol>
<li>Add the “TextTweener” block in the WordPress block editor</li>
<li>Enter at least two text phrases in the block settings</li>
<li>Customize animation settings (duration, easing, stagger) as desired</li>
<li>Publish and watch your text animate</li>
</ol>

Alternatives to TextTweener

Top alternatives