Oh ! Animation pour une home page

Pour la home page de ce site, je souhaitais mettre en avant une animation motion design qui remplisse un certain nombre de critères :

• représente mon style : si possible un hybride entre mon style d'animation et mon style de dessin
• me présente personnellement : mon visage, et une posture avenante et chaleureuse
• rappelle que le motion design peut surprendre et émerveiller
• soit interactif d'une façon subtile, en accord avec le site et invite à regarder mon portfolio en-dessous

‍

J'ai d'abord imaginé le concept :

• mon visage qui regarde d'abord le texte, s'en étonne, puis fait face au lecteur et enfin regarde vers le bas de la page
• une animation intéractive : le visage ne regarde en bas que si on commence à scroller vers le bas, et remonte la tête pour regarder le lecteur en souriant si on remonte
• une animation très fluide : beaucoup de souplesse
• une animation légère : un format qui permet d'économiser beaucoup de poids
• des couleurs en lien avec mon thème mais qui ressortent quand même

‍

‍

J'ai ensuite tourné une courte de vidéo de référence pour pouvoir étudier mes propres traits. J'ai fait beaucoup de dessins, y compris en traditionnel image par image, pour mieux comprendre ces traits.

‍

‍

Dans les dessins ci-dessus, vous voyez dans un logiciel d'animation image par image traditionnelle (TVPaint), la vision dite "en pelure d'oignon" : on voit en transparence les images précédentes dans une couleur, les images suivantes dans une autre, ce qui permet d'affiner chaque dessin en fonction de ceux qui l'entourent. Si un mouvement est rapide, les dessins sont espacés ; si un mouvement est lent, les dessins sont rapprochés.

‍

‍

Pour la réalisation j'ai opté pour une animation vectorielle, avec After Effect. Chaque trait est une forme vectorielle que j'anime ensuite image par image. Je m'aide toujours de la vidéo de référence, mais je la simplifie et l'arrange à ma sauce (et aussi, je raccourcis ma coupe de cheveux !). Je cherche à reproduire la souplesse et la fluidité de l'original, mais aussi sa présence humaine. Avez-vous remarqué que le personnage cligne plusieurs fois des yeux pendant l'animation ?

‍

‍

L'intégration dans le site se fait via Lottie et BodyMovin. Ainsi, l'animation elle-même, interactive, est assez légère, surtout comparé au poids qu'elle aurait en vidéo ou en gif de qualité équivalente.

Vous trouverez la réalisation finale dans sa meilleure définition et la plus légère en home de ce site. Ci-dessous, vous trouverez aussi un gif animé, plus lourd et de moins bonne définition.

Cette image marque les esprits d'emblée à l'arrivée sur mon site, mission accomplie !