Persönliche Story — „Von der jQuery-Idee vor 10 Jahren zum Rewrite 2026“

Vor zehn Jahren hatte ich eine Idee: Was wäre, wenn einzelne Buchstaben smooth von einem Text zum nächsten fliegen könnten — wie ein Anagramm, das sich in Echtzeit löst? Die Idee wurde ein jQuery-Plugin. Dann passierte… nichts. Zehn Jahre lang. Bis jetzt.

Die Idee

Es fing mit einer einfachen Beobachtung an: Text-Animationen im Web waren langweilig. Fade in, fade out. Slide up, slide down. Typewriter-Effekt. Immer das Gleiche.

Ich fragte mich: Was passiert eigentlich mit den einzelnen Buchstaben, wenn sich ein Text ändert? Das Wort „Kreativität“ und das Wort „Kreativkraft“ teilen sich fast alle Buchstaben — nur ein paar müssen sich bewegen. Was, wenn man das sichtbar machen könnte?

Die Idee: Jeder Buchstabe, der in beiden Texten vorkommt, fliegt an seine neue Position. Buchstaben, die verschwinden, faden aus. Neue Buchstaben faden ein. Das Ergebnis sieht aus wie ein Anagramm, das sich in Echtzeit löst.

Nach einigem Tüfteln hatte ich einen Algorithmus, der genau das konnte. Ich baute ihn als jQuery-Plugin — das Standardwerkzeug der Zeit — und er funktionierte. Ich war ehrlich stolz.

Und dann? Dann kamen andere Projekte. Andere Prioritäten. Für zehn Jahre lag TextTweener still im Repository — funktionsfähig, aber eingefroren in der Zeit.

Was TextTweener macht

TextTweener animiert Übergänge zwischen Texten auf Buchstaben-Ebene. Statt den ganzen Text auszutauschen, wird jeder einzelne Buchstabe analysiert: Kommt er im nächsten Text vor? Wo muss er hin? Wie weit ist der Weg?

Das Ergebnis: Eine Animation, die komplex aussieht, aber auf einem eleganten Prinzip basiert. Hier ein paar Beispiele — achte darauf, wie die gemeinsamen Buchstaben ihren Weg finden:

Leistungen kommunizieren

Emotionen transportieren

Zahlen sprechen lassen

Warum erst jetzt?

Die ehrliche Antwort: Es gab nie genug Zeit. TextTweener als jQuery-Plugin funktionierte. Es hatte keine Bugs. Es hatte nur… Staub angesetzt.

Aber 2026 ist die Web-Plattform eine andere als 2016. CSS-Animationen sind GPU-beschleunigt. TypeScript hat sich durchgesetzt. ES Modules sind Standard. WordPress hat den Block-Editor. Und ich hatte endlich die Muße, TextTweener das Rewrite zu geben, das es verdient hat.

Nicht flicken. Nicht portieren. Komplett neu denken.

Alt vs. Neu

Drei Plattformen, ein Algorithmus

TextTweener 2026 ist nicht nur eine JavaScript-Library. Der gleiche Matching-Algorithmus läuft auf drei Plattformen — jede für einen anderen Workflow optimiert.

npm / JavaScript — Für Entwickler

Die Kern-Library. 4.3 KB gzipped, null Abhängigkeiten. Funktioniert mit jedem Framework oder vanilla. npm install texttweener und los.

WordPress — Für Content-Creator

Ein nativer Gutenberg-Block mit visuellen Controls: Texte eingeben, Timing per Slider einstellen, Easing wählen, Ausrichtung festlegen, Schriftgröße anpassen. Kein Code nötig. Die Demos in diesem Artikel verwenden alle den WordPress-Block.

After Effects — Für Motion Designer

Ein ExtendScript, das den gleichen Algorithmus nutzt, um Positions- und Opacity-Keyframes für jede Buchstaben-Ebene zu generieren. Perfekt für Intros, Titel-Animationen und Social-Media-Clips.

Für Entwickler: In 30 Sekunden loslegen

npm install texttweener

import { TextTweener } from 'texttweener';

const tt = new TextTweener('#hero', {
  texts: [
    'Wir produzieren Filme',
    'Wir entwickeln Websites',
    'Wir bauen KI-Lösungen',
  ],
  transitionDuration: 900,
  stagger: 18,
});

// Das war's. Auto-play, auto-size, loop.

Volle API-Kontrolle mit play(), pause(), next(), prev(), goTo() — alle Promise-basiert. Lifecycle-Events für beforeTransition, afterTransition, change und mehr.

Oder einfach per Script-Tag ohne Build-Prozess:

<script src="https://unpkg.com/texttweener/dist/index.umd.min.js"></script>
<script>
  new TextTweener('#hero', {
    texts: ['Hello', 'Hallo', 'Bonjour', 'Ciao'],
  });
</script>

Open Source

TextTweener ist MIT-lizenziert. Frei nutzbar für private und kommerzielle Projekte. Der komplette Quellcode liegt auf GitHub.

Warum Open Source? Weil die Idee zehn Jahre in einer Schublade lag. Sie verdient es, genutzt zu werden — von so vielen Menschen wie möglich.