🎨

framer-motion

Name: framer-motion
Author: Asmayaseen

آمن ⚙️ الأوامر الخارجية🌐 الوصول إلى الشبكة📁 الوصول إلى نظام الملفات

Ajouter des animations à React avec Framer Motion

Créez des interfaces utilisateur engageantes avec des animations fluides. Cette compétence fournit des modèles de code prêts à l'emploi pour les effets au survol, les transitions de page, les animations de défilement et les interactions gestuelles complexes dans les applications React et Next.js.

يدعم: Claude Codex Code(CC)

📊 69 كافٍ

تنزيل ZIP المهارة

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

فعّل وابدأ الاستخدام

اختبرها

استخدام "framer-motion". Créer un bouton avec des animations au survol et au tap

النتيجة المتوقعة:

Utiliser whileHover pour l'effet d'agrandissement (échelle 1.05)
Utiliser whileTap pour l'effet de pression (échelle 0.95)
Appliquer une transition spring pour une sensation naturelle
Combiner avec des changements de couleur d'arrière-plan pour un retour visuel

استخدام "framer-motion". Ajouter une animation décalée à une liste d'éléments

النتيجة المتوقعة:

Définir un variant de conteneur avec un délai staggerChildren
Définir un variant d'élément individuel avec des propriétés d'animation
Appliquer le variant de conteneur au composant motion parent
Appliquer le variant d'élément à chaque composant motion enfant

استخدام "framer-motion". Créer un effet de transition de page

النتيجة المتوقعة:

Envelopper le contenu de la page dans le composant AnimatePresence
Définir des variants d'entrée et de sortie pour l'animation de page
Utiliser mode='wait' pour des transitions séquentielles
Appliquer les variants au composant motion.div englobant

التدقيق الأمني

آمن

v5 • 1/16/2026

Pure documentation skill containing markdown references, TypeScript templates, and code examples for Framer Motion animation library. Static scanner produced false positives: TypeScript template literals flagged as shell commands, animation terminology flagged as crypto keywords, and React keyboard events flagged as certificate access. All findings are dismissed. This is legitimate animation documentation with no executable code, network calls, or file system access patterns.

الملفات التي تم فحصها

4,929

الأسطر التي تم تحليلها

النتائج

إجمالي عمليات التدقيق

عوامل الخطر

⚙️ الأوامر الخارجية (322)

🌐 الوصول إلى الشبكة (1)

skill-report.json:6

📁 الوصول إلى نظام الملفات (1)

skill-report.json:6

تم تدقيقه بواسطة: claude عرض سجل التدقيق →

درجة الجودة

الهندسة المعمارية

100

قابلية الصيانة

المحتوى

المجتمع

100

الأمان

الامتثال للمواصفات

ماذا يمكنك بناءه

Composants d'interface interactifs

Ajoutez des effets au survol, des animations de boutons et des micro-interactions aux composants React

Transitions de page

Créez des transitions fluides entre les routes dans les applications Next.js App Router

Expériences de défilement

Construisez des animations liées au défilement, des effets de parallaxe et des interactions de révélation au défilement

جرّب هذه الموجهات

Animation de base en fondu

Créer une animation d'apparition en fondu pour un composant React utilisant Framer Motion

Liste décalée

Construire une liste qui anime les éléments un par un avec un effet de décalage utilisant les variants Framer Motion

Révélation au défilement

Ajouter des animations de révélation déclenchées par le défilement aux éléments lorsqu'ils entrent dans la zone de visualisation

Transitions de page

Implémenter des transitions de page fluides entre les routes dans une application Next.js App Router

أفضل الممارسات

Utiliser les variants pour les animations coordonnées complexes afin de garder le code organisé
Respecter les préférences de l'utilisateur en vérifiant useReducedMotion avant d'animer
Garder les transitions de page sous 500ms pour une meilleure expérience utilisateur
Préférer les propriétés accélérées par le GPU comme l'opacité et les transformations plutôt que les changements de mise en page

تجنب

Éviter d'animer des propriétés coûteuses comme la largeur, la hauteur ou top/bottom de manière répétée
Ne pas sauter les animations de sortie lors de la suppression d'éléments du DOM
Éviter l'utilisation excessive de la prop layout car cela peut impacter les performances sur les grandes listes
Ne pas utiliser des durées fixes pour toutes les animations; préférer les springs pour les interactions

الأسئلة المتكررة

Quels frameworks React sont supportés ?

Framer Motion fonctionne avec n'importe quel framework React incluant Next.js, Create React App, Vite et Remix.

Quel est l'impact sur la performance des animations ?

Framer Motion utilise des transformations accélérées par le GPU. Évitez d'animer les propriétés de mise en page sur les grandes listes.

Comment puis-je m'intégrer avec Next.js App Router ?

Utilisez template.tsx avec AnimatePresence pour les transitions de route. Enveloppez le contenu de la page dans des composants motion.

Cette compétence accède-t-elle à des services externes ?

Non. Cette compétence est purement documentaire. Elle génère du code localement sans appels réseau ni collecte de données.

Pourquoi mes animations de sortie ne fonctionnent-elles pas ?

Les animations de sortie nécessitent un wrapper AnimatePresence autour des éléments qui seront supprimés du DOM.

En quoi est-ce différent des animations CSS ?

Framer Motion fournit un contrôle impératif, la reconnaissance de gestes, la liaison au défilement et les springs basés sur la physique.

تفاصيل المطور

المؤلف

Asmayaseen

الترخيص

MIT

المستودع

https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/framer-motion

مرجع

main

بنية الملفات

📁 examples/

📄 list-animations.md

📄 micro-interactions.md

📄 page-transitions.md

📄 scroll-animations.md

📁 reference/

📄 gestures.md

📄 hooks.md

📄 motion-component.md

📄 variants.md

📁 templates/

📄 animated-list.tsx

📄 page-transition.tsx

📄 SKILL.md