Motion-Principles : les 12 principes Disney pour agents

Concepts issus de la vidéo « 8 outils motion design » de Simon De Lima (oct. 2026). Skill rédigé de zéro, sans reprise de son contenu.

Ces 12 principes (Disney, années 1930) sont ce qui sépare une animation « faite par un humain » d'une animation « faite par un robot ». Les appliquer à chaque animation produite, quel que soit l'outil.

Les 12 principes, en règles pratiques

1. Écrasement et étirement : un objet qui bouge se déforme légèrement (une balle qui rebondit s'écrase à l'impact). En UI : un bouton « respire » quand on clique.
2. Anticipation : un petit mouvement inverse avant l'action principale (recul avant le saut). En UI : léger retrait avant l'apparition d'un menu.
3. Mise en scène : guider l'œil vers l'essentiel, un seul point focal à la fois.
4. Enchaînement (pose à pose) : planifier les positions clés d'abord, remplir les intervalles ensuite. C'est le storyboard appliqué à l'animation.
5. Suivi et chevauchement : les parties d'un objet ne bougent pas toutes en même temps (les cheveux suivent la tête). En UI : effet stagger, les éléments arrivent en cascade.
6. Ralentis en entrée et sortie : tout accélère et décélère (easing), rien ne bouge à vitesse constante sauf intention.
7. Arcs : les mouvements naturels suivent des courbes, pas des lignes droites.
8. Action secondaire : un geste secondaire renforce l'action principale (un personnage qui marche balance les bras). En UI : une ombre qui suit un soulèvement.
9. Timing : la durée raconte la physique (lourd = lent, léger = rapide) et l'émotion.
10. Exagération : pousser un peu plus loin que le réalisme pour que l'effet se voie.
11. Dessin solide : volumes cohérents, pas de déformation qui casse l'objet (sauf l'écrasement voulu du principe 1).
12. Attrait : le résultat doit donner envie de regarder : lisible, élégant, intentionnel.

Utilisation

Avant de valider une animation, passer la checklist : easing présent (6) ? durées crédibles (9) ? un seul point focal (3) ? cascade plutôt que tout-en-même-temps (5) ? Si une animation « fait robot », c'est presque toujours le principe 6 ou le 9 qui manque.