Interactive Studio

Know How

Know How

Framer Motion

Framer Motion ist eine leistungsstarke Open Source Animation Library für React.

Mit der Softwarebibliothek entwickelt eine Usability-Agentur erste Wireframes, Prototypen und vor allem interaktive Animationen.

Framer Motion ermöglicht auf ganz einfache Art und Weise ein responsives Weblayout. Der offene Quellcode bietet den beteiligten UX-Designern zwei Use Cases: Zum einen können sie über eine Browseroberfläche eine Browser-App öffnen und dort animierte Websites bzw. einzelne animierte Website-Komponenten per Visual Editor erstellen und exportieren. Diese Komponenten binden sie dann in eine Webseite ein. Die animierten Komponenten bedienen sich immer der production-ready Motion Library von Framer. Zum anderen interagieren die Webdeveloper direkt mit der Library und erstellen Animationen, ohne den Editor zu benutzen.

Ein ganz besonderes Framer-Motion-Feature ist die Verbindung mit einem Code-Editor. Der bietet einerseits eine intuitive visuelle Herangehensweise und ermöglicht die Erstellung von einfachen Websites. Die einzelnen vorgefertigten visuellen Module sind fix zusammengestellt. Des Weiteren bietet sich Webentwicklern die Optimierung der einzelnen Komponenten mit Code. Developer passen sie mit der Script-Sprache React direkt an das angestrebte Design an. Mit dem Stack lassen sich Interfaces entwickeln und per Scrolling-Tool Scroll-Animationen einbauen, Graphics und Icons einbinden. Framer spannt dabei den Bogen vom Usability-Designer zur Backend-Webentwicklung.

Begierde Wissen

insights

insights