Übergänge, die sich flüssig anfühlen statt ruckelig.
Kümmert sich um die kleinen Bewegungen: ein Menü, das aufklappt, eine Karte, die beim Darüberfahren leicht anhebt, ein Wechsel zwischen zwei Ansichten.
Alles springt hart um. Man merkt jeden Wechsel unangenehm.
Übergänge fühlen sich an wie eine Bewegung, nicht wie ein Umschalten.
- Du beschreibst das Ziel, nicht den Weg
Es steht da, wie etwas aussehen soll — der Weg dorthin wird berechnet.
- Verschwinden wird mitanimiert
Normalerweise ist ein Element sofort weg. Hier bekommt auch das Weggehen eine Bewegung.
- Federn statt fester Dauer
Bewegung nach Federgesetzen fühlt sich näher an echten Gegenständen an als eine feste Ablaufzeit.
- Es läuft im Browser mit
Es ist zusätzlicher Code, der geladen wird. Für ein einzelnes Aufblenden reicht meistens eine CSS-Zeile.
- Zustand ändert sich
- Framer Motion rechnet
- Weicher Übergang
- Neuer Zustand
Der Sprung zwischen zwei Zuständen wird zur Bewegung. Das ist kein Schmuck: eine Karte, die aufklappt statt zu erscheinen, ist leichter zu verstehen.
Eine Bewegungsbibliothek für React. Man beschreibt den Zielzustand, nicht den Weg dorthin — den Übergang rechnet die Bibliothek aus. Ihre Besonderheit sind Bewegungen, bei denen ein Element von einer Position zur nächsten wandert, auch wenn sich das Layout dazwischen ändert.
- Gebaut für
- React
- Prinzip
- Zielzustand statt Ablauf
- Besonderheit
- Wechsel der Position
- Gefühl
- Federn statt fester Dauer
Klappmenüs, deren Einträge nacheinander erscheinen
Karten, die beim Darüberfahren leicht anheben
Schritt-für-Schritt-Strecken ohne harten Wechsel
Sie bewegt einzelne Bausteine gut, aber keine langen Abläufe über die ganze Seite. Dafür ist GSAP das richtige Werkzeug — beide nebeneinander einzusetzen ist normal.
Das Klappmenü oben und die Karten unter dem Mauszeiger — beides läuft darüber.