Animationen & Interaktionen — Websites, die sich lebendig anfühlen

Schlecht umgesetzte Animationen verlangsamen eine Seite spürbar, weil sie Layout-Eigenschaften wie Breite, Höhe oder Position verändern und der Browser dadurch bei jedem Frame neu rechnen muss. Wir animieren deshalb bevorzugt GPU-beschleunigte Eigenschaften wie Transformation und Transparenz, die der Browser ohne teures Neu-Layout verarbeitet. Elemente außerhalb des sichtbaren Bereichs bleiben inaktiv, bis die IntersectionObserver-API meldet, dass sie in den Viewport eintreten — es läuft also nie mehr Animation gleichzeitig, als der Nutzer tatsächlich sieht. Bei GSAP-Timelines behalten wir zusätzlich im Blick, wie viele Elemente parallel animiert werden, und fassen wo möglich mehrere Bewegungen zu einer einzigen Timeline zusammen. Vor dem Launch prüfen wir Largest Contentful Paint und Interaction to Next Paint gezielt mit aktiven Animationen — Bewegung darf die Ladezeit oder Reaktionsfähigkeit zu keinem Zeitpunkt verschlechtern.

Die Media Query prefers-reduced-motion erkennt, ob ein Nutzer in seinem Betriebssystem reduzierte Bewegung eingestellt hat, etwa weil Animationen bei ihm Schwindel oder Konzentrationsprobleme auslösen können. Ist diese Einstellung aktiv, ersetzen wir aufwendige Scroll- und Bewegungseffekte durch einfaches Ein- und Ausblenden oder verzichten ganz auf Bewegung, ohne dass Inhalte oder Funktionen dadurch verloren gehen. Diese Prüfung gehört bei uns standardmäßig zu jeder Animation, unabhängig von Komponente oder Seite. Betroffen sind neben Menschen mit vestibulären Störungen auch alle, die auf einem schwächeren Gerät oder einer instabilen Verbindung unterwegs sind und Bewegung schlicht als störend empfinden. Gerade bei aufwendigen Parallax-Effekten sorgt diese Rücksicht dafür, dass auch Nutzer mit aktivierter Systemeinstellung die komplette Seite uneingeschränkt bedienen können.

Einfache Übergänge wie ein Hover-Zustand, ein Ein- oder Ausblenden oder ein Farbwechsel lösen wir mit CSS-Transitions, weil der Browser sie ohne zusätzliches JavaScript performant selbst verarbeitet. Sobald mehrere Elemente zeitlich koordiniert werden müssen, etwa eine Abfolge, bei der ein Element erst nach Abschluss eines anderen startet, oder eine Animation an die Scroll-Position gekoppelt werden soll, stößt CSS an seine Grenzen: Timing und Zwischenzustände lassen sich kaum mehr sauber pflegen. GSAP übernimmt genau diese Fälle mit einer Timeline-API, die Reihenfolge, Überlappung und Geschwindigkeit einzelner Schritte präzise steuerbar macht, und bringt über das ScrollTrigger-Plugin scroll-gesteuerte Sequenzen zuverlässig über verschiedene Browser hinweg zum Laufen. Die Faustregel in der Praxis: Wird eine CSS-Animation unübersichtlich lang oder muss sie auf mehrere Auslöser reagieren, wechseln wir zu GSAP und behalten die Komplexität dort sauber im Griff.

Ja, wir ergänzen bestehende Websites gezielt um Bewegung und binden uns dafür an Ihre vorhandene Technik und Ihren Code-Stil an.

Genau darauf achten wir. Weniger, aber gezielt eingesetzt wirkt hochwertiger. Jede Bewegung muss den Nutzer führen oder etwas verständlicher machen — sonst lassen wir sie weg.