Motion: Animations-Framework für React, JavaScript und Vue

Repositorymotiondivision/motionTool

Motion (früher Framer Motion) ist eine etablierte Open-Source-Bibliothek für Web-Animationen. Sie kombiniert eine deklarative JavaScript- und TypeScript-API mit nativen Browser-Schnittstellen, um GPU-beschleunigte Animationen mit bis zu 120 fps für moderne Benutzeroberflächen bereitzustellen.

Das Wichtigste

  1. Früher als Framer Motion bekannt; React-Importe laufen nun über 'motion/react' statt 'framer-motion'.
  2. Bietet offizielle Unterstützung für React, natives JavaScript und Vue (über das Paket 'motion-v').
  3. Nutzt eine Hybrid-Engine aus JavaScript und nativen Browser-APIs für 120-fps-GPU-Performance.
  4. Liefert integrierte Funktionen für Gesten, Springs (Federphysik), Layout-Animationen, Scroll-Effekte und Timelines.
  5. Vollständig in TypeScript verfasst, modular tree-shakable und mit über 450 Code-Beispielen dokumentiert.

Warum das relevant ist

Für Frontend-Teams vereinfacht Motion anspruchsvolle UI-Interaktionen und Micro-Interactions erheblich, ohne Kompromisse bei Ladezeit oder Rendering-Performance einzugehen.

Einordnung

Was das Projekt löst

Komplexe Web-Animationen stoßen mit reinen CSS-Animationen schnell an funktionale Grenzen, während reine JavaScript-Implementierungen oft die Rendering-Pipeline belasten. Motion adressiert diesen Konflikt durch eine deklarative Abstraktionsschicht und eine hybride Engine, die JavaScript-Logik mit hardwarebeschleunigten Browser-APIs verknüpft.

Funktionsumfang und Plattformen

Ursprünglich stark an das React-Ökosystem gebunden, deckt das Projekt mittlerweile mehrere Plattformen ab:

  • React: Deklarative Syntax über Komponenten wie <motion.div> mit direkter Steuerung von Animationszuständen.
  • JavaScript: Leichtgewichtige API für Vanilla-JS und Framework-agnostische Setups via animate().
  • Vue: Eigene Integration über das optionale Paket motion-v.

Zu den Kernkomponenten gehören physikbasierte Feder-Animationen (Springs), Erkennung von Gesten (Drag, Hover, Tap), automatisches Layout-Morphing sowie scrollgesteuerte Übergänge.

Reifegrad

Mit über 34.000 Sternen auf GitHub, MIT-Lizenz und Millionen monatlichen Downloads gehört Motion zu den stabilsten und meisteingesetzten Animationsbibliotheken im JavaScript-Ökosystem. Die Reorganisation weg vom reinen Framer-Branding hin zu einer universellen Bibliothek für Web-Animationen unterstreicht die langfristige Ausrichtung.

Erwähnte Links

Gefunden in

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 1. November 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Link:Matt Perry

    Motion: Web-Animationsbibliothek für React, JavaScript und Vue

    Motion (ehemals Framer Motion) ist eine unter der MIT-Lizenz veröffentlichte Animationsbibliothek für React, JavaScript und Vue. Sie nutzt eine Hybrid-Engine aus JavaScript und hardwarebeschleunigten Browser-APIs (wie ScrollTimeline). Neben über 430 Beispielen bietet das Ökosystem Entwicklertools wie Motion UI, einen KI-Kit für Coding-Agenten und MotionScore für Performance-Audits.

    Webentwicklung· Tool

  • Repository:juliangarnier/anime

    Anime.js: Leichtgewichtige JavaScript-Animations-Engine

    Anime.js ist eine schlanke und vielseitige JavaScript-Animationsbibliothek mit einer zugänglichen API. Sie ermöglicht Entwicklern das flexible Animieren von CSS, SVG, DOM-Attributen und JavaScript-Objekten.

    74.136SterneJavaScript

    Webentwicklung· Tool

  • Link:Subframe

    Subframe Motion: Open-Source-Animationen und Shader für React via MCP

    Subframe Motion bietet eine Sammlung von 309 Open-Source-Beispielen für React-Animationen, Motion-Komponenten und WebGL-Shader. Die Bibliothek kann ohne Account genutzt und direkt über das Model Context Protocol (MCP) eingebunden werden. Sie richtet sich an Entwickler und UI-Designer.

    Webentwicklung· Sammlung

Zurück zur Wissensbasis

Sprechen wir über Ihr Projekt.

Kontakt

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Ein Teil von diesem Inhalt wurde mit KI gemacht.