Sanftes Scrollen, Schrift, die aus einem Nebel auftaucht, und ein Hintergrund, der auf die Maus reagiert: Solche Details können einer WordPress-Seite einen eigenen Charakter geben. Ich habe mit Lenis, Gestaltungselementen von ReactBits und Animationen auf dem eigenen Blog beziehungsweise in einem Kundenprojekt gearbeitet. Besonders das Smooth-Scrolling mit Lenis und die Gestaltungsmöglichkeiten von ReactBits begeistern mich.
Wie lässt sich das sinnvoll kombinieren? Indem jedes Werkzeug eine klar begrenzte Aufgabe übernimmt und der Inhalt auch ohne Effekte funktioniert. Lenis beeinflusst das Scrollgefühl, ReactBits liefert Gestaltungskomponenten, und GSAP kann Animationen steuern. Drei Werkzeuge bedeuten aber nicht, dass jede Seite alle drei braucht.
- Scrollen: Lenis glättet Scrollbewegungen; es ersetzt keine durchdachte Seitenstruktur.
- Gestaltung: Aurora, ein zusätzliches Mauslicht und ein Überschrifteneffekt sind getrennte Bausteine.
- Zugänglichkeit: Text, Navigation und Bedienung müssen auch mit reduzierter Bewegung und ohne Maus verständlich bleiben.
Lenis macht das Scrollgefühl zum Gestaltungselement
Beim normalen Lesen geht es zunächst darum, zuverlässig durch eine Seite zu kommen. Lenis ergänzt dieses Verhalten um geglättete Bewegungen. Gerade beim Übergang zwischen größeren Abschnitten kann das einen anderen Eindruck vermitteln als ein abrupter Sprung. Das ist der Teil, der mich an Lenis besonders anspricht.
Technisch ist wichtig, Scrollgefühl und Animation auseinanderzuhalten. Lenis lässt nicht automatisch Überschriften erscheinen und zeichnet auch keinen animierten Hintergrund. Die offizielle Lenis-Dokumentation beschreibt sowohl eine eigenständige Einrichtung als auch die Synchronisierung mit GSAP ScrollTrigger.
Für eine WordPress-Seite heißt das: Erst prüfen, ob das Scrollen allein angenehm bleibt. Danach weitere Effekte ergänzen. Ein träges Nachlaufen ist kein Qualitätsmerkmal. Wer mit Tastatur, Mausrad oder Touch navigiert, soll die Kontrolle behalten. Auch Sprunglinks, Menüs und separat scrollbare Bereiche gehören deshalb auf die Prüfliste.
ReactBits Aurora und Mauslicht sind zwei Effekte
ReactBits ist eine Sammlung animierter React-Komponenten. Dazu gehören Hintergründe, Texteffekte und interaktive Elemente. Der Reiz liegt für mich darin, dass Gestaltungsideen nicht bei einem statischen Farbfeld enden.
Auf der Startseite eines Kundenprojekts besteht der Kopfbereich aus Aurora in einer Blau-Gold-Gestaltung und einem ergänzenden Mauslicht. Aurora liefert den animierten Hintergrund und reagiert laut aktuell geprüftem Quellcode standardmäßig selbst auf den Mauszeiger. Das zusätzliche Mauslicht folgt dem Zeiger im gesamten Feld und ist ein eigener Effekt. Beides gehört gestalterisch zusammen, ist aber nicht dasselbe. Welche Aurora-Version im Projekt eingesetzt wurde, ist nicht dokumentiert.
Diese Trennung hilft bei der Planung: Soll der Hintergrund lediglich Atmosphäre schaffen oder selbst auf den Zeiger reagieren? Und soll ein separater Lichtakzent hinzukommen? Wer beides bewusst entscheidet, kann auf dem Smartphone eine ruhigere Variante vorsehen, statt eine Mausinteraktion nachbauen zu wollen. Wichtige Informationen dürfen dabei nicht erst unter einem Lichtfleck sichtbar werden.
Für WordPress gibt es eine weitere Grenze: Eine React-Komponente ist kein fertiger Gutenberg-Block. Der Installationsweg von ReactBits richtet sich an ein passendes Entwicklungsprojekt. Den Quelltext in einen HTML-Block zu kopieren, ist deshalb keine vollständige Integration. Dafür muss geklärt werden, wo die Komponente läuft und wie ihre benötigten Dateien geladen werden.
Schrift aus dem Nebel braucht kein ReactBits BlurText
Ein Detail, das ich umgesetzt habe: Ausgewählte Titel kommen wortweise von rechts und werden dabei aus Unschärfe scharf. Der Eindruck ist, als würde die Schrift aus einem Nebel hervortreten.
In diesem Projekt ist das eine eigene CSS-/JavaScript-Umsetzung, nicht die eingebaute ReactBits-Komponente BlurText. Eine ähnliche Optik bedeutet nicht automatisch dieselbe technische Lösung. Für die Entscheidung auf der eigenen Website ist das hilfreich: Nicht jeder einzelne Effekt rechtfertigt eine zusätzliche Komponentenbibliothek.
Bei einer Überschrift sollte die Animation kurz zur Aufmerksamkeit beitragen und dann enden. Der Text selbst bleibt eine normale, sinnvoll gegliederte Überschrift. Als sichere Grundlage sollte er bereits ohne laufende Animation lesbar sein. Bei reduzierter Bewegung kann der vollständige Titel direkt erscheinen, statt erst durch den Unschärfeeffekt lesbar zu werden.
GSAP ScrollTrigger verbindet Animation und Leseposition
Während Lenis das Scrollgefühl beeinflusst, beantwortet GSAP ScrollTrigger eine andere Frage: Wann soll etwas passieren? Eine Animation kann beim Erreichen eines Abschnitts starten oder mit dem Scrollfortschritt verbunden werden. Im zweiten Fall bewegt sie sich beim Zurückscrollen entsprechend zurück.
Ein Beispiel aus dem Kundenprojekt ist ein dekoratives Diagramm mit blauen Balken und einer goldenen Linie beziehungsweise einem Pfeil. Am Desktop baut es sich beim Scrollen auf und rückwärts wieder ab. Für Mobil ist eine Grafik weiter unten auf der Seite vorgesehen, die sich einmal aufbaut. Es handelt sich nicht um reale Börsen- oder Geschäftsdaten.
Das zeigt einen sinnvollen Unterschied zwischen Desktop und Mobil: Nicht die komplette Inszenierung muss auf den kleinen Bildschirm schrumpfen. Eine einfache Darstellung kann denselben gestalterischen Zweck erfüllen. Wo eine Grafik echte Informationen vermittelt, gehören diese unabhängig von der Animation zugänglich in den Inhalt.
Wenn Lenis und ScrollTrigger zusammenarbeiten, sollten sie aufeinander abgestimmt sein. Das Lenis-README zeigt dafür eine Kopplung der Scrollereignisse und des Animationstakts. Es geht also nicht nur darum, beide Bibliotheken zu laden.
So lässt sich die Umsetzung in WordPress eingrenzen
Ein allgemeines Kopier-und-fertig-Rezept wäre hier irreführend. Theme, vorhandene Erweiterungen und ein möglicher React-Bereich bestimmen den Einbau. WordPress dokumentiert mit wp_enqueue_script() einen vorgesehenen Weg, JavaScript-Dateien mit benannten Abhängigkeiten zu laden. Das allein bindet aber noch keine ReactBits-Komponente als fertigen Seitenbereich ein.
Für ein überschaubares Vorgehen empfehle ich diese Reihenfolge:
- Den ruhigen Ausgangszustand sichern. Ein wiederherstellbares Backup anlegen und Änderungen zunächst in einer Testumgebung vornehmen. Die Seite muss ohne neue Effekte bereits funktionieren.
- Nur einen Bereich auswählen. Zum Beispiel den Kopfbereich oder eine einzelne Überschrift. So bleibt erkennbar, welchen Nutzen der jeweilige Effekt hat.
- Die technische Einbindung klären. Scrollglättung, React-Hintergrund und eigene CSS-/JavaScript-Effekte getrennt einbinden und prüfen, welche Dateien bereits geladen werden.
- Die reduzierte Variante mitbauen. Statischer Hintergrund, direkt sichtbarer Titel und normale Bedienung sind Teil der Umsetzung, kein späterer Notbehelf.
- Erst danach erweitern. Weitere Animationen nur ergänzen, wenn Lesen, Navigation und Ladeverhalten überzeugend bleiben.
Zugänglichkeit zeigt sich beim Benutzen
Die Systemeinstellung für reduzierte Bewegung lässt sich über prefers-reduced-motion erkennen. Sie signalisiert den Wunsch, nicht notwendige Bewegung zu reduzieren oder zu ersetzen. Sie macht eine beliebige Animation aber nicht von selbst zugänglich.
Das aktuell abgerufene Lenis-README dokumentiert dafür die standardmäßig aktive Option respectReducedMotion. Auch der oben verlinkte Aurora-Quellcode berücksichtigt die Einstellung in der aktuell geprüften Version beim Einrichten: Er hält die zeitgesteuerte Bewegung an, unterdrückt den Introeffekt und deaktiviert die Zeigerreaktion. Das belegt nicht das Verhalten der unbekannten Projektversion oder einen Einstellungswechsel während der Nutzung. Die eingesetzten Versionen, die eigene Überschrift und das separate Mauslicht müssen deshalb jeweils geprüft werden.
- Tastatur: Lassen sich Links und Bedienelemente erreichen, bleibt der Fokus sichtbar und folgt der Bildausschnitt sinnvoll?
- Touch: Funktioniert die Seite ohne Hover und ohne Mauslicht? Lassen sich Menüs und überlagerte Bereiche weiterhin bedienen?
- Reduzierte Bewegung: Sind Titel sofort lesbar und dekorative Bewegungen angemessen reduziert? Diese Einstellung vor dem Laden und bei einem Wechsel während der Nutzung prüfen.
- Lesbarkeit: Bleibt der Text vor allen Zuständen des bewegten Hintergrunds gut erkennbar, auch bei Vergrößerung?
- Leistung: Die Seite mit und ohne Effekte vergleichen, auch auf einem schwächeren Mobilgerät. Stockendes Scrollen oder verzögerte Eingaben sind Gründe, Effekte zu vereinfachen.
Das ist eine praktische Prüfliste, kein Nachweis vollständiger Barrierefreiheit. Ebenso wenig ersetzt eine ansprechende Desktop-Demo die Prüfung auf einem echten Smartphone.
Ein gezielt eingesetzter Effekt ist besser als fünf konkurrierende
Mich begeistern das weiche Scrollgefühl von Lenis und die Gestaltungsmöglichkeiten von ReactBits. Besonders hängen bleiben für mich die aus dem Nebel erscheinende Schrift und mausfolgende Hintergründe. Entscheidend ist aber die Kombination: Ein ruhiger Textbereich braucht nicht dieselbe Bewegung wie der Einstieg einer Seite.
Für eine WordPress-Seite würde ich mit einem klar begrenzten Effekt beginnen. Lenis für das Scrollgefühl, Aurora für den Hintergrund oder eine eigene Überschriftenanimation – und GSAP dort, wo der Scrollfortschritt wirklich etwas steuern soll. Die Seite ist dann gelungen, wenn sie mit Bewegung Charakter gewinnt und ohne Bewegung nichts Wesentliches verliert.
Zum Thema verlinke ich außerdem das YouTube-Video „Wir pimpen eine 08/15-KI-Website“ von Worth Making. Die technischen Zuordnungen in diesem Beitrag stützen sich auf die oben verlinkte Dokumentation und meine Umsetzung im Kundenprojekt.