Le timing et l'easing sont les deux réglages qui séparent une animation amateur d'une animation professionnelle en motion design. Le timing définit la durée et le rythme d'un mouvement. L'easing définit la façon dont la vitesse évolue entre le début et la fin de ce mouvement.
Bonne nouvelle : ces deux notions s'apprennent, et elles transforment immédiatement la qualité perçue de vos animations. Dans ce guide, vous découvrirez les bases du timing, les grandes familles de courbes d'easing, le travail dans le graph editor d'After Effects et les applications concrètes sur un texte, un logo ou une interface.
Le timing en motion design : donner un rythme au mouvement
Le timing désigne la durée d'un mouvement et sa place dans le temps, exprimées en secondes ou en nombre d'images. C'est lui qui décide si une animation paraît vive, posée, hésitante ou pesante.
Tout part du frame rate, le nombre d'images affichées par seconde. Quelques repères stables :
- 24 images par seconde : l'héritage du cinéma, avec son rendu légèrement organique ;
- 25 images par seconde : la tradition de la télévision européenne ;
- 30 et 60 images par seconde : les cadences courantes du web et des interfaces, pour un rendu très fluide.
À 24 images par seconde, un mouvement d'une demi-seconde occupe 12 images. Raisonner en images plutôt qu'en secondes vous donne un contrôle bien plus fin sur le rythme.
Le nombre d'images consacré à un geste change aussi son intention. Une apparition en 6 images paraît sèche et énergique. La même apparition en 20 images devient élégante et posée. Aucune des deux n'est meilleure : tout dépend de l'émotion recherchée et du tempo global du film.
Le timing se pense aussi à l'échelle du film entier : alternance de moments rapides et de respirations, synchronisation avec la musique et les accents sonores. Un montage calé sur le rythme musical donne cette impression de cohérence que l'on ressent sans savoir l'expliquer. C'est un pilier du storytelling en motion design.
L'easing : la courbe de vitesse qui rend l'animation naturelle
L'easing désigne la façon dont la vitesse d'un mouvement évolue entre sa première et sa dernière image, décrite par une courbe d'interpolation. Dans la réalité, rien ne démarre ni ne s'arrête instantanément : une voiture accélère, puis freine. L'easing reproduit cette logique physique.
Quatre familles de courbes couvrent la majorité des besoins :
- linéaire : vitesse constante du début à la fin, rendu mécanique ;
- ease in : départ lent, puis accélération progressive ;
- ease out : départ rapide, puis décélération douce jusqu'à l'arrêt ;
- ease in out : accélération puis décélération, le mouvement le plus naturel.
Cette idée porte un nom dans l'animation traditionnelle : le slow in slow out, l'un des douze principes fondamentaux du motion design. Un objet ralentit à l'approche de sa position finale, comme dans le monde physique.
Le tableau suivant résume l'effet perçu de chaque type d'easing et son usage recommandé.
Graph editor et spacing : passer au niveau professionnel
Le graph editor désigne l'éditeur de courbes d'After Effects, qui affiche la vitesse ou la valeur d'une propriété animée sous forme de graphique modifiable. C'est là que le vrai travail d'easing commence, au-delà des préréglages.
Plutôt que d'appliquer un simple ease in out standard, vous sculptez la courbe : une accélération franche, un long ralenti d'arrivée, une pointe de vitesse au milieu du trajet. Deux animations peuvent partager le même timing et raconter des choses opposées, uniquement par la forme de leur courbe.
Exemple concret : pour un panneau qui glisse à l'écran, dessinez une courbe qui atteint sa vitesse maximale dans le premier tiers du trajet, puis décélère longuement. L'objet semble léger, précis, maîtrisé. La même trajectoire en linéaire paraîtrait administrative.
Cette pratique rejoint la notion de spacing, héritée de l'animation traditionnelle : l'espacement entre les positions successives d'un objet d'une image à l'autre. Des positions resserrées produisent un mouvement lent, des positions espacées un mouvement rapide. Le graph editor n'est qu'une façon moderne de dessiner ce spacing. Pour approfondir ces termes de métier, consultez notre vocabulaire du motion design.
Timing et easing en pratique : texte, logo, micro-interactions
Appliquer le timing et l'easing en motion design consiste à choisir, pour chaque élément animé, une durée et une courbe cohérentes avec son rôle dans le film. Trois cas concrets le montrent bien.
- Le texte animé : une apparition en ease out, rapide au départ puis posée en douceur, rend le texte lisible sans brutalité. Le timing doit laisser le temps de lire avant la disparition.
- Le logo : une animation de logo réussie joue souvent sur un ease out marqué, avec un léger dépassement puis un retour en place. Ce rebond maîtrisé donne du caractère sans nuire à la lisibilité.
- Les micro-interactions d'interface : boutons, menus et transitions demandent des mouvements courts et des courbes douces. L'utilisateur doit percevoir la réponse sans jamais attendre l'animation. Au dixième affichage d'un menu, personne ne veut plus admirer le mouvement : chacun veut son contenu.
Chez La Combine, ce travail de finition occupe une part importante de chaque production, notamment sur les projets de motion 2D dynamique, où le rythme fait tout le sel du film.
L'erreur classique : tout animer en linéaire
Tout animer en linéaire consiste à laisser l'interpolation par défaut du logiciel, sans travailler les courbes de vitesse. C'est le marqueur le plus reconnaissable d'une animation débutante : les objets glissent à vitesse constante, comme posés sur un tapis roulant.
Le résultat semble étrangement artificiel, même pour un œil non averti. Notre cerveau connaît la physique du mouvement : il repère immédiatement ce qui ne décélère jamais. À l'inverse, un simple passage en ease in out change la perception d'une scène entière en quelques clics.
La combine la plus rentable pour progresser tient en une habitude : ne jamais valider un plan sans avoir questionné chaque courbe. Le linéaire doit devenir un choix délibéré, réservé aux mouvements mécaniques, et non un réglage par défaut. Vous trouverez d'autres pièges du même genre dans notre article sur les erreurs classiques en motion design.
FAQ : vos questions sur le timing et l'easing en motion design
Qu'est-ce que l'easing en motion design ?
L'easing est la façon dont la vitesse d'un mouvement évolue entre son point de départ et son point d'arrivée, décrite par une courbe d'interpolation. Un easing linéaire garde une vitesse constante et paraît mécanique. Un ease out démarre vite et ralentit à l'arrivée, un ease in fait l'inverse, et un ease in out combine les deux. Bien choisi, l'easing donne aux animations un rendu naturel et professionnel.
Quelle est la différence entre ease in et ease out ?
L'ease in démarre lentement puis accélère : il convient aux objets qui quittent l'écran ou s'élancent. L'ease out démarre vite puis décélère jusqu'à l'arrêt : c'est le choix privilégié pour les entrées d'écran, les apparitions de texte et les poses de logo, car l'arrivée douce guide le regard. En combinant les deux, l'ease in out produit le mouvement le plus naturel pour un déplacement complet.
Combien d'images par seconde pour une animation en motion design ?
Trois repères stables existent. Le 24 images par seconde, hérité du cinéma, donne un rendu légèrement organique très apprécié en motion design narratif. Le 25 images par seconde correspond à la tradition télévisuelle européenne. Le 30 et le 60 images par seconde dominent le web et les interfaces, où la fluidité prime. Le bon choix dépend du canal de diffusion et du rendu recherché.
Qu'est-ce que le principe slow in slow out ?
Le slow in slow out est l'un des douze principes fondamentaux de l'animation, formalisés par les studios Disney. Il énonce qu'un mouvement naturel commence lentement, accélère, puis ralentit avant de s'arrêter, comme tout objet soumis à l'inertie. En animation numérique, ce principe se traduit par les courbes d'easing de type ease in out. L'appliquer est le moyen le plus direct de rendre une animation crédible.
Comment utiliser le graph editor dans After Effects ?
Le graph editor s'ouvre depuis la timeline d'After Effects et affiche vos animations sous forme de courbes de vitesse ou de valeur. Sélectionnez une propriété animée, activez l'éditeur, puis manipulez les poignées des images clés pour sculpter l'accélération et la décélération. Commencez par des courbes simples, observez le résultat image par image, et affinez progressivement. C'est l'outil central du travail d'easing professionnel.
Quelle durée pour une animation de logo ?
Il n'existe pas de durée unique, mais une logique : une animation de logo doit rester courte, le temps de quelques secondes, pour marquer sans lasser. Le timing interne compte davantage que la durée totale : une construction progressive, un accent au moment de la révélation, puis une pose stable. Testez plusieurs rythmes et gardez la version qui reste agréable après dix visionnages consécutifs.
Deux réglages, un rendu professionnel
Le timing donne le rythme, l'easing donne la vie. En travaillant ces deux dimensions, plan par plan et courbe par courbe, vous faites passer vos animations du statut de correct à celui de professionnel. C'est un savoir-faire qui s'affine avec la pratique et l'exigence.
Vous préférez confier ce niveau de finition à des spécialistes ? Faire appel à une agence motion design comme La Combine, c'est bénéficier de l'expérience de plus de 250 films produits. Écrivez-nous pour parler de votre projet.
Sommaire
