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: https://realmaker.de/texttweener/ — see the animation in action before installing.

Source Code & Build Instructions:

The minified file assets/texttweener.umd.min.js is built from the TypeScript source at:
https://github.com/Realmaker/textTweener

To build from source:

Clone the repository: git clone https://github.com/Realmaker/textTweener.git
Install dependencies: npm install
Build: npm run build

The compiled output is generated in dist/ using tsup (ESBuild-based bundler). The build configuration is in tsup.config.ts.

Features:

Smooth letter-by-letter animation between text phrases
Customizable display duration, transition speed, and stagger
Multiple easing presets (Smooth, Ease Out, Bounce, Linear)
Add as many text phrases as you need
Responsive and works with any WordPress theme
No jQuery dependency
No-JavaScript fallback for accessibility

Usage:

Add the “TextTweener” block in the WordPress block editor
Enter at least two text phrases in the block settings
Customize animation settings (duration, easing, stagger) as desired
Publish and watch your text animate