Rive.app, un challenger face au grand lottie

25 août 2021
Le combat entre challenger rive et lottie files

Face à l’enjeu grandissant de l’expérience utilisateur sur le web et les apps, nous avons vu s’implémenter de nombreuses librairies d’animation en javascript (anime.js, Gsap de Greensock, bounce.js etc…), le CSS et les keyframes, les SVG et bien évidemment la vidéo interactive, palliant en grande partie la disparition du poids lourd Flash invaincu depuis plus de 25 ans...

Pourquoi animer ?

Le cerveau humain est conçu pour remarquer les mouvements : pour être aux aguets en cas de danger, pour trouver de la nourriture, et pour prendre en compte les signaux silencieux qui sont partie intégrante de notre communication. En animant des éléments d’une page web, nous pouvons capter l’attention de nos visiteurs et les guider sur notre site, anticiper l’interaction, afficher des guides visuels, grâce à des indices qui permettent de vivre une expérience plus fluide et plus agréable, en accompagnant sur le parcours d’achat par exemple. L’explication par l’animation c’est 0 effort pour l’utilisateur pour une compréhension dans le confort.

Les technologies évoluant constamment la praticité de l’exercice se démocratise beaucoup plus. Et au plus la praticité se démocratise au plus la technologie se simplifie. Cependant, faire une animation n’est pas chose si aisée. Outre les principes de mouvement chez Disney, il faut tout de même prendre en considération la technique et l’apprentissage de celle-ci, l’affichage ainsi que le poids. Car une animation trop lourde risque de ne pas se charger correctement et un délai d’attente trop long fait sonner la cloche de l’abandon.

Animation interactive des éléments d'une page web sur téléphone portable

Interaction Design GIF by bazookasthlm

Lottie sur le ring, médaille d’argent ?

Le monde du web a toujours voulu ces animations d’interfaces, et cela depuis Flash qui rendait des sites jusqu’à des jeux vidéos voir même développait des sites comme des jeux vidéos. Depuis 2020, Flash s’est éteint. L’animation des SVG et la librairie GSAP avaient bien pris la relève pour un résultat très satisfaisant ce depuis 15 ans, mais elles sont spécifiques à des éléments (blocs, sections, couleurs, icones simples…). Quand est-il des éléments comme des logos, des personnages ?

Et c’est là qu’intervient Lottie. En 2015, Hernan Torrisi a eu l’idée d’exporter la représentation d’une animation dans Adobe After Effects (le logiciel de motion design et d’effets spéciaux) et de rendre l’animation à l’exécution avec son plug-in Bodymovin qui exportait la description au format JSON* de l’animation. Il a également publié le tout premier moteur de rendu pour le format avec un lecteur basé sur Javascript pour le navigateur.

Les motion-designers ont pu ainsi commencer à explorer des animations de qualités (vecteurs), comprenant des mouvements spécifiques comme les amortis ou les accélérations et ainsi donner plus de vie, de dynamique pour un poids moindre. Les principes de Disney comme les étirements de formes, les étriquements sont maintenant possibles pour donner de l’émotion aux animations et donc ajouter encore plus d’expérience utilisateur. Par la suite, des ingénieurs D’Airbnb voyant le potentiel JSON ont créé des bibliothèques pour IOS et Android, avec un lecteur web de fichier Lottie.

Nous avons donc les avantages du format SVG (vecteurs), la possibilité d’animations fluides et dynamiques avec un poids minime, interprétables via le web, les tablettes et mobiles, les montres connectées.
Cependant, la prise en main requiert un logiciel ou une plateforme dédiée comme WebFlow, After effects, Protopie, Haiku avec un budget plus ou moins onéreux et un entrainement constant pour gagner en productivité.

Animation d'une voiture qui roule avec Lottie files et webflow
Exemple Lottie files + WebFlow

Rive.app, le poids plume qui joue collectif

Le tout nouveau challenger de ce genre d’animations n’est pas en reste. Axé collectif, il intègre les webdesigners. Avec une interface qui ressemble à Figma, les animations se créent maintenant en équipe. C’est un tout-en-un, avec un onglet design et un onglet animation.
Il reprend les principes de Lottie quand à l’accessibilité différents “devices” en y ajoutant même les consoles de jeux. Le poids est également pris en considération, les développeurs y mettent un point d’honneur et leur “runtime” reste open source.
Concernant l’onglet design les utilisateurs de Figma seront en terrain conquis avec une hiérarchie très similaire. Pour les utilisateurs d’Illustrator ou Sodipodi, il faut tout de même un petit temps d’adaptation.

L’onglet animation est quant à lui au plus simple. Une timeline avec vos images clés, une gestion des calques de formes, un choix pour l’intensité d’animation (amortis, accélérations). Il reprend les grands axes des logiciels d’animation comme After Effects par ex. Nous pouvons même intégrer des “squelettes” d’animation pour une facilité plus que convaincante. Le petit plus est que dorénavant un procédé de changement d’état est possible rendant le design interactif vraiment entrainant.

La prise en main requiert également un entrainement constant et le “logiciel” est payant mais reste très abordable.
Une fois les principes assimilés, les animateurs pourront s’en donner à cœur joie et nous projeter vers un web encore plus interactif.

Animation d'une connexion avec un ours qui regarde la souris inscrire des lettres et se cacher les yeux quand il y a un mot de passe
Exemple Rive.app d’animation interactive

En somme,

Que vous soyez développeurs ou designers et que vous souhaitez donner de la vie à vos interfaces, une large panoplie d’outils est à votre disposition. Du codage main au quasi no-code, c’est un choix à faire. Ces années web mettent vraiment en avant l’imagination au service de l’utilisateur…

Sources :

https://lottiefiles.com/

https://rive.app/


Derniers articles

Rive.app, un challenger face au grand lottie

Face à l’enjeu grandissant de l’expérience utilisateur sur le web et les apps, nous avons vu s’implémenter de nombreuses librairies d’animation en javascript (anime.js, Gsap de Greensock, bounce.js etc…), le CSS et les keyframes, les SVG et bien évidemment la vidéo interactive, palliant en grande partie la disparition du poids lourd Flash invaincu depuis plus […]