Des animations motion design pour le web… interactives !
L’animation, ce « petit truc » en plus sur un site web.
Ce n’est plus un secret, je suis passionné par le motion design depuis que je suis tombé dedans, il y a maintenant 6 ans. J’ai eu l’occasion d’utiliser cette technologie à plusieurs reprises sur des sujets très variés comme des présentations de produits, de concepts, teasers ou même encore des cartes de voeux digitales.
Le résultat est toujours bien perçu car ludique, mais qu’en est-il lorsque vous souhaitez associer animation et web pour avoir des sites dynamiques ?
Et bien, c’est très vite compliqué car le format vidéo à tendance à être lourd, et donc non adapté à un site qui se doit d’être performant (bien qu’il soit possible d’uploader une vidéo et la diffuser en streaming via des plates-formes de type Youtube).
Mais rassurez-vous, il existe des solutions.
Animation Gif, Lottie ou Rive ?
Il est bien loin le temps des GIF crados, ultra pixelisés et lourds comme un parking de camion-bennes, la toile regorge de nouvelles technologies au poil !
Il y a quelques mois de cela, j’ai découvert par le plus grand des hasards un nouvel outil qui porte le doux nom de « Lottie » (non, ce n’est ni un poisson, ni un pseudo de star de film indépendant).
La force du Lottie est qu’il s’agit d’une animation exportée au format .json capable de prendre en compte des animations d’images (bitmap) et/ou vecteurs ! Ce qui la rend bien plus fluide et moins lourde qu’un GIF.
Et surtout… Il est extrêmement simple de générer un Lottie depuis une animation réalisée sous After Effects, c’est donc le crime parfait.
Me voilà donc tout fier, à balancer des Lottie à droite et à gauche sur l’ensemble de mes sites. Les rendus sont sympas et tout le monde est content !
Qu’est-ce donc cette diablerie ?
Mais voilà, il y a quelques semaines de cela, mon bon Jimmy revient vers moi et me dit :
« Salut poulet, t’as déjà essayé Rive.app ? Ca à l’air top, et apparemment mieux qu’un Lottie ».
N’y croyant pas trop, je me décide d’aller voir par moi-même et là, force m’est d’admettre que je reste littéralement bluffé par ce que je vois.
Ma première réflexion fut la suivante : On dirait un Lottie, mais c’est interactif et les transitions sont incroyablement fluides !
En tant que graphiste explorateur, je décide de m’essayer à l’exercice. Et en pur designer passionné, j’en profite pour m’essayer à un nouveau style graphique, plus proche du Game Art.
Je commence donc par créer une petite illustration sur Illustrator sur le thème d’Halloween puis importe le fichier sur Rive.app
Bien que l’interface utilisateur soit vraiment top, Rive n’est pas un outil forcément facile à prendre en main surtout au niveau de la logique de compréhension.
Je commence par créer mes boucles d’animations, puis via le StateMachine, j’attribue des liens entre chacune d’elles régies par des conditions préalablement définies via les Listeners & Attributs.
Une fois le travail terminé (et d’innombrables tests et fails dont je vous épargnerai le détail), me voilà prêt à exporter mon animation interactive.
Pour cela, plusieurs choix sont possibles :
- Via une iframe, le plus simple quand vous n’êtes pas un pur codeur.
- En téléchargeant un fichier que vous devrez par la suite héberger, puis intégrer dans un canvas.
L’avantage de cette seconde solution est que vous pourrez – par le bias de code Javascript – intéragir avec les différents StateMachines et donc lier votre animation à des éléments de votre page web, comme par exemple un bouton.
Oui donc, au final ? Mieux vaut utiliser du Lottie ou du Rive pour les animations de mon site ?
Résultat des comptes, les deux technologies restent à mon sens utiles.
Le point fort du Lottie est qu’il est totalement gratuit, et que vous pouvez l’utiliser de manière illimité. Son utilisation est à privilégier quand vous souhaitez faire une animation d’une petite illustration qui tournerait en boucle sur un site, de manière purement décorative par exemple.
Le Rive quant à lui, permet d’utilisation jusqu’à deux projets gratuits, après cela vous devrez débourser (tout de même) 21€ par mois pour une utilisation à grande échelle. En terme d’expérience utilisateur et performances, il s’agit d’un très bon atout.
Pour clore le débat, je continuerai d’utiliser ces deux solutions de manière générale et adapterai en fonction du sujet à traiter.