Web-Animation.

Animation auf Websites hat drei Aufgaben. Sie gibt Rückmeldung: Ein Button, der beim Antippen leicht reagiert, bestätigt die Eingabe. Sie schafft Orientierung: Ein Menü, das aus einer Richtung hereingleitet, zeigt, woher es kommt und wohin es wieder verschwindet. Und sie erzählt: Eine Abfolge von Schritten, die beim Scrollen nacheinander erscheinen, erklärt einen Ablauf verständlicher als ein statisches Bild. Animation, die keine dieser Aufgaben erfüllt, ist Dekoration — und kostet Aufmerksamkeit und Ladezeit.

Technisch reicht die Bandbreite von einfachen CSS-Übergängen bis zu komplexen Szenen. CSS-Transitions und -Animationen genügen für Hover-Effekte, Menüs und Einblendungen. Bibliotheken wie GSAP steuern Zeitleisten und scrollgebundene Abläufe präzise. SVG eignet sich für gezeichnete Linien, Icons und Diagramme in Bewegung. WebGL ermöglicht dreidimensionale Effekte und Partikelsysteme, verlangt aber deutlich mehr Rechenleistung und sorgfältige Optimierung.

Leistung ist der kritische Punkt. Flüssig wirken Animationen, die nur Eigenschaften wie transform und opacity verändern, weil der Browser sie ohne Neuberechnung des Layouts darstellen kann. Animationen von Breite, Höhe oder Position zwingen den Browser zu teuren Berechnungen und führen auf schwächeren Smartphones zu Ruckeln. Schwere Animationsbibliotheken sollten erst geladen werden, wenn sie gebraucht werden, damit sie den ersten Seitenaufbau und die Interaction to Next Paint nicht belasten.

Barrierefreiheit gehört dazu. Manche Menschen reagieren auf starke Bewegung mit Schwindel oder Übelkeit. Betriebssysteme bieten deshalb die Einstellung «Bewegung reduzieren», die Websites über die CSS-Abfrage prefers-reduced-motion respektieren sollten: Animationen werden dann verkürzt oder durch einfache Überblendungen ersetzt. Inhalte dürfen nie nur über Animation vermittelt werden.