motion
Erstellen Sie anspruchsvolle React-Animationen mit Motion (ehemals Framer Motion) – deklarative Animationen, Gesten (Ziehen, Schweben, Tippen), Scroll-Effekte, Federphysik, Layout-Animationen und SVG-Manipulation. Optimieren Sie die Bundle-Größe mit LazyMotion (4,6 KB) oder verwenden SieAnimate mini (2,3 KB). Verwendung bei: Hinzufügen von Drag-and-Drop-Interaktionen, Erstellen von durch Scrollen ausgelösten Animationen, Implementieren modaler Dialoge mit Übergängen, Erstellen von Karussells mit Dynamik, Animieren von Seiten-/Routenübergängen, Erstellen von Parallax-Hero-Abschnitten, Implementieren von Akkordeons mit sanftem Erweitern/Reduzieren oder Optimieren der Größe von Animationspaketen. Verwenden Sie für einfache Listenanimationen stattdessen die Fähigkeit zur automatischen Animation (3,28 KB gegenüber 34 KB). Fehlerbehebung: AnimatePresence-Exit funktioniert nicht, Leistungsprobleme bei großen Listen, Tailwind-Übergangskonflikte, Next.js-„Client verwenden“-Fehler, Probleme mit dem scrollbaren Containerlayout oder Cloudflare Workers-Buildfehler (behoben im Dezember 2024).
Installation
SKILL.md
Motion (package: motion, formerly framer-motion) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.
Production Tested: React 19, Next.js 16, Vite 7, Tailwind v4
Performance: Uses native ScrollTimeline API when available for hardware acceleration.
Erstellen Sie anspruchsvolle React-Animationen mit Motion (ehemals Framer Motion) – deklarative Animationen, Gesten (Ziehen, Schweben, Tippen), Scroll-Effekte, Federphysik, Layout-Animationen und SVG-Manipulation. Optimieren Sie die Bundle-Größe mit LazyMotion (4,6 KB) oder verwenden SieAnimate mini (2,3 KB). Verwendung bei: Hinzufügen von Drag-and-Drop-Interaktionen, Erstellen von durch Scrollen ausgelösten Animationen, Implementieren modaler Dialoge mit Übergängen, Erstellen von Karussells mit Dynamik, Animieren von Seiten-/Routenübergängen, Erstellen von Parallax-Hero-Abschnitten, Implementieren von Akkordeons mit sanftem Erweitern/Reduzieren oder Optimieren der Größe von Animationspaketen. Verwenden Sie für einfache Listenanimationen stattdessen die Fähigkeit zur automatischen Animation (3,28 KB gegenüber 34 KB). Fehlerbehebung: AnimatePresence-Exit funktioniert nicht, Leistungsprobleme bei großen Listen, Tailwind-Übergangskonflikte, Next.js-„Client verwenden“-Fehler, Probleme mit dem scrollbaren Containerlayout oder Cloudflare Workers-Buildfehler (behoben im Dezember 2024). Quelle: joaquimcassano/ideas-marketplace.
Fakten (zitierbereit)
Stabile Felder und Befehle für KI/Such-Zitate.
- Installationsbefehl
npx skills add https://github.com/joaquimcassano/ideas-marketplace --skill motion- Kategorie
- </>Entwicklung
- Verifiziert
- —
- Erstes Auftreten
- 2026-02-17
- Aktualisiert
- 2026-02-18
Schnelle Antworten
Was ist motion?
Erstellen Sie anspruchsvolle React-Animationen mit Motion (ehemals Framer Motion) – deklarative Animationen, Gesten (Ziehen, Schweben, Tippen), Scroll-Effekte, Federphysik, Layout-Animationen und SVG-Manipulation. Optimieren Sie die Bundle-Größe mit LazyMotion (4,6 KB) oder verwenden SieAnimate mini (2,3 KB). Verwendung bei: Hinzufügen von Drag-and-Drop-Interaktionen, Erstellen von durch Scrollen ausgelösten Animationen, Implementieren modaler Dialoge mit Übergängen, Erstellen von Karussells mit Dynamik, Animieren von Seiten-/Routenübergängen, Erstellen von Parallax-Hero-Abschnitten, Implementieren von Akkordeons mit sanftem Erweitern/Reduzieren oder Optimieren der Größe von Animationspaketen. Verwenden Sie für einfache Listenanimationen stattdessen die Fähigkeit zur automatischen Animation (3,28 KB gegenüber 34 KB). Fehlerbehebung: AnimatePresence-Exit funktioniert nicht, Leistungsprobleme bei großen Listen, Tailwind-Übergangskonflikte, Next.js-„Client verwenden“-Fehler, Probleme mit dem scrollbaren Containerlayout oder Cloudflare Workers-Buildfehler (behoben im Dezember 2024). Quelle: joaquimcassano/ideas-marketplace.
Wie installiere ich motion?
Öffnen Sie Ihr Terminal oder Kommandozeilen-Tool (Terminal, iTerm, Windows Terminal, etc.) Kopieren Sie diesen Befehl und führen Sie ihn aus: npx skills add https://github.com/joaquimcassano/ideas-marketplace --skill motion Nach der Installation wird der Skill automatisch in Ihrer KI-Programmierumgebung konfiguriert und ist bereit zur Verwendung in Claude Code oder Cursor
Wo ist das Quell-Repository?
https://github.com/joaquimcassano/ideas-marketplace
Details
- Kategorie
- </>Entwicklung
- Quelle
- user
- Erstes Auftreten
- 2026-02-17