Weniger Show, mehr Zweck: Animationen smarter einsetzen – Warum wir über Animationen im Webdesign nachdenken müssen

autor: Shantu A. Bhattacharjee

13.10.2025

Teilen auf :

Vor einigen Jahren waren Animationen das große Thema im professionellen Webdesign, ja, lange war sogar vom Cinematic Webdesign die Rede. Dabei schwang auch immer diese unbestimmte Hoffnung mit, dass sich daraus noch etwas viel Größeres entwickeln würde. Man müsste nur ganz vorn dabei sein, um es irgendwann zu sehen. Animationen waren jedenfalls das It-Piece der Top-Developer: Bewegungen, Übergänge, Slides und Effekte bildeten eine Quadriga des State of the Art. Wer sie hatte, konnte große Brands überzeugen.

Wir als Web-Spezialisten sind den Weg gern mitgegangen, von Scroll-Animationen bis zu Page Transitions. You name it, we got it, und um unseren Kunden den Extra-Kick zu geben, setzten wir auf JavaScript-Animationen. Doch irgendwann hat sich das lautlos verändert. In der Gesellschaft, bei uns und auch bei unseren Kunden – und heute wissen wir, dass Web-Animationen nicht mehr groß sein müssen. Sie müssen vielmehr intelligent sein und hilfreich.

Barrierefreiheit und System-Preferences: Warum weniger oft mehr ist

Animierte Website-Orientierung durch Bewegung

Die meisten kennen Animationen aus dem Kino, doch dass sie auch im professionellen Webdesign zuhause sind, überrascht dann doch. Wenn wir Kunden dann allerdings hochwertige animierte Websites zeigen, erkennen sie sofort ihre Klasse und Stil. Sie wirken frisch, schnell, modern – als wollten sie sagen: „Hier ist etwas, das du unbedingt kennenlernen solltest.“

Eine gute Web-Animation reagiert, ist nicht selten interaktiv und leitet unseren Blick auf etwas Außergewöhnliches: Wir können analog etwas digital verändern.

Ein Button reagiert → „Ich habe etwas ausgelöst.“
Ein Panel öffnet sich → „Der neue Bereich gehört hierher.“
Ein Bild blendet sich ein → „Das ist der neue Fokus.“

Das sind die guten Animationen.

Rücksicht auf Benutzereinstellungen

Doch die Zeit ändert sich – und uns. Heute fragen wir uns häufiger: Braucht es das Ganze? Und die Antwort lautet nicht selten „Nein“, denn die Reduktion auf das Wesentliche schärft unseren Blick. Hier, im Leben, wie auch in der Digitalisierung ganz allgemein. Weniger Chichi, mehr schlanke Präzision, nicht umsonst bieten heute bereits viele Betriebssysteme und Browser von sich aus die Einstellung „Bewegung reduzieren“. So wird aus „Nicht-verzichten-Müssen“ Fokus.

Accessibility as Standard

Wenn das wegfällt, haben wir mehr Zeit, uns auf die Menschen zu konzentrieren. Mit zunehmendem Alter bekommen viele nämlich Probleme, von denen sie nicht ahnten, dass es sie überhaupt gibt. Das Hörvermögen nimmt ab, und plötzlich verschwimmt nicht nur der Blick auf die Kaffeetasse, sondern auch die Schrift auf dem Bildschirm. Deshalb ist die digitale Barrierefreiheit Grundvoraussetzung und für Websites sogar gesetzlich geregelt: Die EU schreibt in den WCAG 2.2 beispielsweise vor:

Nicht-essenzielle Animationen müssen im Motion Sensitive Mode abschaltbar sein.

Warum Performance zählt

An der Börse, im Job oder Sport – Schnelligkeit hat sich für die Menschen schon immer ausgezahlt und auch in der Digitalisierung sieht das nicht anders aus. Websites, egal ob Corporate-, Portfolio- oder Hotel-Seite, gewinnen, wenn sie performen, performen, performen. Animationen dürfen deshalb niemals zur Belastung werden, weder für die Augen noch für den Prozessor. Deshalb empfehlen führende UX-Designer heute weltweit:

lieber ein sanftes Verblassen (Opacity) als einen schwerfälligen Slide von links nach rechts;
lieber einen kleinen Farbwechsel als einen ruckeligen 3D-Flip.

Das Ergebnis ist flüssiger und damit angenehmer. Die kürzere Dauer schenkt den Besuchern eine klare Easing-Kurve.

Best Practices:

100 bis 300 Millisekunden für die meisten Übergänge
400 Millisekunden nur für große Bewegungen (z. B. ein Modal, das aufklappt)
Sanfte Easing-Kurven: Bewegungen, die natürlich wirken, weil sie langsam starten oder enden

Weniger Code, mehr Wirkung: Unser Weg zu purem CSS

Unternehmen schauen selten gern lange zurück, gerade im Digitalen, wo der Blick uns eher in die Zukunft führt, doch auch wir haben auf JavaScript-Frameworks wie Framer Motion gesetzt. Das war beeindruckend und viele Jahre genau das, was unsere Kunden wollten. Unser Mantra heute: viel weniger JavaScript, mehr CSS.

CSS ist schlicht schlanker, performanter!
CSS respektiert Systemeinstellungen automatisch.
CSS bleibt zugänglich, auch wenn JavaScript blockiert wird.

Ja, natürlich, wir sind große JavaScript-Fans, aber nur dann, wenn sie sinnvoll sind. In der Logik, in der Interaktivität. Animationen dagegen gehören (fast immer) ins CSS. Wir refaktorisieren deshalb Stück für Stück unsere Projekte: schnell raus aus der JavaScript-Vergangenheit, hin zu zukunftsfähigem CSS.

Fazit

Unser persönlicher Weg

Wir wollen nicht nur reagieren, sondern antizipieren. Unsere Full-Stack-Entwickler und UX-Designer denken konsequent „outside the box“, mit Augen und Ohren direkt am Puls der Zeit. Technisch versiert, ästhetisch sensibel und formal in der Gesellschaft, für die sie gestalten und aus der unsere Kunden kommen. Manche Dinge spürt man, bevor sie überhaupt sichtbar werden. Wir greifen sie auf, bevor sie Form annehmen.

Früher galt: je lauter, desto besser. Heute wissen wir: Weniger ist mehr. Nutzer wollen Klarheit, Kunden wollen Einfachheit. Die Magie steckt heute im Detail.

Lass dich von uns inspirieren!

Wir denken Webentwicklung weiter – mit Design, das Zugänglichkeit und Ästhetik verbindet.

Melde dich bei uns!

+49 30 4004 5775

Hier findest du themenverwandte Artikel: