À utiliser lors de la mise en œuvre de modifications d'itinéraire, de transitions de vue, d'ouvertures/fermetures modales ou d'animations de navigation dans des applications Web et mobiles.
Installez rapidement le skill IA page-transitions dans votre environnement de développement via la ligne de commande
Source : dylantarre/animation-principles.
Apply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.
| Squash & Stretch | Entering page elastic effect | | Anticipation | Exit animation before enter | | Staging | Hero elements bridge views | | Straight Ahead / Pose to Pose | Shared element vs crossfade | | Follow Through / Overlapping | Content settles after nav | | Slow In / Slow Out | Asymmetric enter/exit easing | | Arc | Slide transitions with curve |
| Secondary Action | Background, nav state changes | | Timing | 200-500ms total transition | | Exaggeration | Reserved for emphasis moments | | Solid Drawing | Consistent spatial model | | Appeal | Smooth, oriented navigation |
Champs et commandes stables pour les citations IA/recherche.
npx skills add https://github.com/dylantarre/animation-principles --skill page-transitionsÀ utiliser lors de la mise en œuvre de modifications d'itinéraire, de transitions de vue, d'ouvertures/fermetures modales ou d'animations de navigation dans des applications Web et mobiles. Source : dylantarre/animation-principles.
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw
https://github.com/dylantarre/animation-principles