Les animations de bannière sur le web ont pas mal évoluées depuis que je suis dans le métier. On est passé du gif où il fallait toujours trouver le bon équilibre entre animation fluide et qualité d’image. Le poids était souvent celui qui gagnait et on se retrouvait avec une qualité très basse ou alors des animations saccadées.

L’alternative se trouvait au sein de Flash. On pouvait sauver son animation en swf et les navigateurs supportaient la lecture de banner en flash. Mais depuis plusieurs années, la lecture du flash a été bannie des navigateurs. Apple et Google n’ont plus voulu de cette technologie pour beaucoup de raison. Et quand ces deux là ont décidé quelque chose, c’est compliqué d’aller contre leurs recommendations.

Adobe a donc dû innover puisque repartir vers le gif n’était pas viable à terme. Ils ont proposé de sortir les banner flash en html et javascript (en voilà un bon format accepté de tous). Le programme Flash a perdu de son attrait puisque plus aucun site n’était créé via cette technologie. Il ne restait plus que les animations à sortir en html5. Ils en ont profité pour changer le nom du programme et l’appeler Animate. Ca reste aujourd’hui un outil utilisé par les agences pour créer des bannières animées et ça fonctionne très bien. Par contre, c’est toujours la même interface (rajeunie mais bon) avec une ligne du temps et des images clés que je ne trouve pas très intuitives.

Je me suis toujours senti plus à l’aise dans After effect. Même si l’interface est plus complète et plus complexe, quel plaisir de pouvoir sortir une belle animation bien fluide. J’ai donc depuis longtemps cherché comment sortir mes animations After Effect pour créer des bannières. Et c’est là que le plugin Bodymovin entre en jeu. Il permet de la même manière qu’Animate de créer des fichiers html5, js et json. On se retrouve donc avec des animations compatibles avec les navigateurs et qui ont la fluidité d’After Effect. Que du bonheur.

Bodymovin est un plugin gratuit que l’on peut installer directement dans After Effect. Il est basé sur la librairie Lottie qui est un produit développé par Airbnb. Si vous devez créer des bannières animées, je ne saurais que vous conseiller d’utiliser cette technologie.