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
Screenshots
TextTweener block in the Block Inserter (Text category).
Block sidebar — add as many text phrases as you like.
Animation controls — display duration, transition, stagger, easing, loop.
Appearance controls — font size.