motion-framer-patterns

motion-framer-patterns

Catalogue généré le 2026-05-11

En une phrase

PatternsSnippets et patterns prêts à l'emploi pour la librairie Motion (ex-anciennement Framer Motion) pouren React : enter/exit,animations d'entrée/sortie, layout animations, shared elements, gestures,gestures reducedet reduced-motion.

Quand l'utiliser

• VoirPour ajouter une animation d'apparition propre à un composant React

Quand tu veux qu'un élément "glisse" élégamment d'une grille vers un détail (layout animation) Pour faire un effet de partage entre deux pages (shared element transition) Quand un site React commence à avoir trop d'animations désordonnées Pour avoir une référence rapide des bonnes pratiques sans relire la descriptiondoc ci-dessusde et la section « Pour aller plus loin ».Motion

Comment l'invoquer

• Slash command : /motion-framer-patterns (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— pour des patterns d'animation React avec Motion

PourDescription allerdétaillée

Motion (anciennement Framer Motion) est la librairie d'animation la plus loinutilisée

Motionen (React)React. Patterns

Elle

Objectif

est très puissante mais facile à mal utiliser, ce qui dégrade la performance et casse le ressenti.

SnippetsCe robustesskill +commence règlespar perf/cleanup.

t'aider

Procédure

à

choisir Choisirle pattern adapté à ton besoin : enter/exit pour une apparition simple, layout pour qu'un élément s'adapte tout seul quand son conteneur change, shared pour qu'un élément "voyage" entre deux contextes (enter/layout/shared/scroll)par Appliquerexemple une carte qui s'ouvre en modal), scroll pour le scroll-triggered. Il applique ensuite les tokens Impldu projet (durées, easings) pour rester cohérent avec le reste du motion system, et implémente la variante reduced-motion QA:en parallèle.

Il finit par une checklist QA qui rappelle les pièges : ne pas avoir trop de layout animations simultanées

(chacune

Outputscoûte attendus

en

perf), 3préférer transform à top/left, nettoyer les listeners au démontage. Tu repars avec trois snippets (enter/layout/shared)prêts Dos/Don’tsà coller (un enter/exit, un layout, un shared), 5 max)do/don't Notemaximum pour ne pas surcharger, et une note explicite sur le reduced-motionmotion. Installation

Hints

:

Install: npm install motion. Pour Thymon : c'est ta référence rapide pour ne pas perdre 30 minutes à chaque animation React.

Source

• Plugin : perso (standalone)
• Nom interne : motion-framer-patterns
• Fichier : /home/thymon/.claude/skills/motion-framer-patterns/SKILL.md