Matt Perry von Framer und ich werfen einen Blick auf die React-Animationsbibliothek Framer Motion.
Zunächst schauen wir uns an, wie einfach die API ist. Sie steuern alles sehr deklarativ durch Requisiten für Elemente in Ihrer JSX. Das Steuern der Animation auf dieser Ebene ist sehr intuitiv und auf sinnvolle Weise mit der Benutzeroberfläche und dem Status verbunden.
Jedes Beispiel, das wir uns ansehen, ist realer und beinhaltet mehr Funktionen dessen, was Framer Motion kann. Reaktionsentwickler werden die Syntax von allem lieben, und alle anderen werden die unglaublich performanten und reibungslosen Ergebnisse lieben.
Am Ende schauen wir uns Framer selbst an, der genau diese Bibliothek intern verwendet, um alle Animationsaufgaben von Framer zu erledigen. Von Framer fasziniert? Laden Sie Framer X herunter.
Demo 1: Grundlegende Syntax
Demo 2: Varianten
Demo 3: AnimatePresence und layoutTransition
Bonus: Schauen Sie sich die Funktion "Scroll to Almiss" im Bild-Popup an.