Les animations comme vous ne les avez jamais vues

Si vous êtes comme nous, vous adorez les sites qui vous en mettent plein la vue, avec un je ne sais quoi qui attire votre regard et éveille votre curiosité. Mais soudain, votre connexion Internet défaille. L’animation est trop lourde, tout le site se bloque.

Ah, si seulement il existait une solution à ce problème... Réjouissez-vous, car c’est le cas ! Chaque jour, nous mettons tout en œuvre pour développer des designs pour différentes marques. Notre équipe créative produit de chouettes animations sur les réseaux sociaux, mais avant, nous avions souvent du mal à déployer ces contenus sur des sites web. Les animations étaient trop volumineuses et pas suffisamment responsives à notre goût… Heureusement, nos équipes sont toujours friandes de nouveaux défis.

Exemple du jour : la création d’un logo responsive pour IGEPA, fournisseur de papier, carton, enveloppes et emballages. Notre mission était de créer une animation captivante. Pour cela, nous avons choisi la puissance et la flexibilité d’Adobe After Effects, et une nouvelle méthode d’export pour tout transformer en code.

 

Toujours plus vite avec Bodymovin

Nos motion designers peuvent créer des animations incroyables, sans utiliser de code. Les formats vidéo tels que le .mp4 ou le .mov sont volumineux et peuvent ralentir le fonctionnement des sites web. Mais en parallèle, la programmation des animations en partant de zéro est un processus laborieux et chronophage. Grâce au plug-in Bodymovin, nous pouvons convertir automatiquement les animations créées visuellement en code : les animations sont exportées par défaut sous forme de fichiers .json qui utilisent le lecteur lottie.js fourni avec le plug-in. Pour afficher ces animations dans les navigateurs, vous pouvez choisir entre svg, canvas et html. Résultat : vos contenus chargent (vraiment) très rapidement. C’est impressionnant !

Ok, super, mais les animations sont-elles responsives ?

Un joli logo animé, c’est déjà bien, mais nous voulions aller encore plus loin, en le rendant responsive et en ajoutant des déclencheurs. Par exemple, nous avons fait en sorte que le logo se transforme en miniature lors du défilement, et que l’animation se déclenche en fonction de la position du curseur ou de la page visitée. Lottie offre une bibliothèque iOS, Android et React Native qui assure le rendu des animations After Effects en temps réel. Les animations sont donc maintenant aussi faciles à déployer que les composants statiques.

 

Et ce n’est qu’un début : dans chaque nouveau projet, nous cherchons comment améliorer l’expérience et les interactions. Notre mission, ce n’est pas simplement de créer des sites : c’est de créer les meilleurs sites.