Motion Design Prinzipien im Web

Eine Animation die linear von A nach B fährt fühlt sich an wie ein Roboter. Eine die ease-out nutzt fühlt sich natürlich an. Der Unterschied sind 3 Buchstaben im CSS, aber die Wirkung ist fundamental.

Die 12 Prinzipien, reduziert aufs Web

Disney definierte 12 Prinzipien der Animation. Für Web-Interfaces sind 4 davon relevant: Timing, Easing (Slow In/Slow Out), Anticipation und Follow Through.

Timing: Schneller als man denkt

200ms für Hover-Effekte. 300ms für Übergänge. 500ms für komplexe Animationen. Alles über 800ms fühlt sich langsam an. Alles unter 100ms wird nicht wahrgenommen.

Easing: cubic-bezier ist dein Werkzeug

ease-out für Elemente die erscheinen. ease-in für Elemente die verschwinden. ease-in-out für Zustandswechsel. Niemals linear, außer bei Loading-Indikatoren.

Für mehr Kontrolle: cubic-bezier(0.22, 1, 0.36, 1) gibt einen snappy Effekt der sich modern anfühlt. Websites wie easings.net zeigen die Kurven live.

Anticipation: Der Moment davor

Ein Button der beim Hover minimal schrumpft bevor er reagiert. Ein Modal das kurz nach unten zuckt bevor es hochfährt. Kleine Bewegungen die dem Gehirn sagen: gleich passiert etwas.

Performance: Will-Change und GPU

CSS-Animationen auf transform und opacity laufen auf der GPU. width, height, top, left triggern Layout-Reflows und sind Gift für 60fps. will-change: transform sagt dem Browser, dass er den Layer vorbereiten soll.

Gute Animation ist unsichtbar. Man merkt sie erst wenn sie fehlt.