Get your bodymovin’

Parfois (raramente) les étoiles s’alignent et ce que vous devez voir dans votre programme coïncide avec ce que vous devez faire en entreprise. Du coup c’est le moment de revenir au coeur de la partie du design la plus fun : l’interactif, en parlant du motion sur le web

Exporter ses animations pour le web

Si vous avez déjà essayé de faire des animations sur le web : svg, canvas, css.. vous savez que ça devient vite assez compliqué tout en prenant pas mal de temps. Et ce serait tellement génial pour les designers de juste pouvoir intégrer rapidement des animations depuis after effect. C’est là qu’intervient la célèbre extension Bodymovin et Lottie, qui s’occupent justement de nous faciliter la vie.

Bodymovin s’occupe de la partie after effect, il exporte votre animation sous forme de .json. Lottie permet de faciliter l’intégration sur le web en prenant en charge les différents devices.

Lottie propose :

• d’héberger directement votre animation sur leur site et de pouvoir l’intégrer sans code pour les designers allergiques au développement
• de custom certains paramètres d’animations et de générer automatiquement la balise lottie-player (lottie-player.js) pour embed le lecteur sur un site
• de transformer votre .json en animation canvas/svg à l’aide d’une librairie javascript tout simple : lottie.min.js (la mejor opcíon)

Bodymovin : un gran poder convella una gran responsabilidad

Le plug-in est super simple à prendre en main, mais comme il s’agit presque de magie, on atteint aussi rapidement ses limites.

Quelques paramètres à garder à l’esprit de bodymovin :

• avoir une animation simple (et optimisée de préférence)
• ne supporte pas les effets d’after effect (à l’exception des filters svg)
• faire attention aux précompositions qui peuvent être à l’origine de problèmes
• support partiel des expressions selon les devices (à transformer en keyframe)

Et la documentation de Lottie permet de se faire une idée des paramètres pris en compte selon chaque devices et selon le format de l’animation.

Il peut être utile pour remplacer certains effets et les calques 3D d’utiliser autotrace (tracé automatique en français).

Une animation personnalisable par l’utilisateur

Ce qui nous intéresse nous, en plus de pouvoir exporter une animation sur le web c’est de pouvoir venir la modifier ensuite sur notre site à l’aide des inputs de l’user, afin de créer différents templates vidéos très simple.

Et là, increíble, Bodymovin a pris en compte dans ses dernières mise à jour les demandes des designers qui ne sont pas allergiques au code. Ce qui permet notamment d’encoder et de compresser les images, d’exporter les calques invisibles, d’exporter un joli .json …

Cela permet de modifier le .json à l’aide d’un petit coup de javascript, et même de télécharger, ensuite, l’animation canvas en webm.