Animation & Motion.

Bewegung erklärt, lenkt den Blick und macht eine Oberfläche greifbar. Ich setze sie gezielt ein, mit Rücksicht auf Ladezeit, Akku und die Einstellung „Bewegung reduzieren“.

Was dazugehört

Erzählen beim Scrollen

Inhalte, die sich beim Scrollen aufbauen, für Produktseiten, Jahresberichte und Kampagnen.

Kleine Interaktionen

Reaktionen auf Maus und Fingertipp, Rückmeldungen und Zustandswechsel, die eine Oberfläche hochwertig wirken lassen.

Lottie & SVG-Animation

Leichte Vektoranimationen aus After Effects oder direkt im Code.

Barrierearme Bewegung

Die Einstellung „Bewegung reduzieren“ wird beachtet, der Tastaturfokus bleibt jederzeit sichtbar, und jede Animation hat eine Aufgabe.

Hält die Beispiele auf dieser Seite an, so wie die Systemeinstellung „Bewegung reduzieren“ Animationen abschaltet.

Werkzeuge
GSAPScrollTriggerLottieCSS AnimationsWeb Animations APIFramer Motion
Referenzen

Aus der Praxis.

Screenshot von Trustventure
01Trustventure Unternehmenswebsite
Screenshot von Der Doppelgänger
02Der Doppelgänger Wartungsservice · Eigenprodukt
01 / 02

Trustventure

Unternehmenswebsite · Entwicklung nach vorgegebenem Design

Website eines Beratungsteams, das schnell wachsende Unternehmen bei Finanzierungsrunden, Transaktionen und Wachstum begleitet. Ich habe das Design als WordPress-Theme umgesetzt, mit Parallax-Effekten, die Tiefe erzeugen.

Was ich gemacht habe
Parallax im Header und in den Illustrationen
Animierte Einstiege beim Laden und Scrollen
Slider für die Branchen
WordPress · PHP · JavaScript
Screenshot von Trustventure
01Trustventure
Unternehmenswebsite · Entwicklung nach vorgegebenem Design

Website eines Beratungsteams, das schnell wachsende Unternehmen bei Finanzierungsrunden, Transaktionen und Wachstum begleitet. Ich habe das Design als WordPress-Theme umgesetzt, mit Parallax-Effekten, die Tiefe erzeugen.

Parallax im Header und in den Illustrationen
Animierte Einstiege beim Laden und Scrollen
Slider für die Branchen
WordPress · PHP · JavaScript
Screenshot von Der Doppelgänger
02Der Doppelgänger
Wartungsservice · Eigenprodukt · Produkt, Design, Entwicklung

Mein eigener Wartungsservice für WordPress und Shopware: Jede Website bekommt einen Zwilling, auf dem Updates und Änderungen zuerst getestet werden, dazu nächtliche Sicherheitsprüfungen und eine lückenlose Akte.

Konzept, Marke und Produktwebsite
Staging-, Sync- und Deploy-Abläufe für WordPress und Shopware
Nächtliche Sicherheitsprüfungen und Versionierung („Die Akte“)
WordPress · Shopware · DevOps
Aus dem Ratgeber · 3 Min. Animationen ohne Ruckeln: Bewegung, die Ladezeiten respektiert Warum manche Animationen ruckeln und andere nicht, und wie Bewegung barrierearm bleibt.
Fragen

Nicht, wenn sie richtig gebaut sind: Sie bewegen nur, was der Browser besonders effizient berechnen kann, und starten erst, wenn sie sichtbar sind. Darauf achte ich bei jeder Umsetzung.

Sie verlassen diese Website.