Dans le monde numérique actuel, où l’expérience utilisateur est primordiale, les animations jouent un rôle essentiel. Elles captivent l’attention, rendent la navigation plus agréable, et ajoutent une touche d’interactivité à un site.
Connais-tu Lottie, une bibliothèque d’animations légères et interactives ? Elle permet d’apporter de la modernité à ton site sans pour autant négliger sa performance. Mieux qu’une bibliothèque générique, je te propose de créer tes propres lottie files. Tu es prêt ?
Qu’est-ce qu’une animation Lottie ?
Une animation Lottie est un fichier d’animation vectoriel au format JSON. Ce format est particulièrement léger et fluide, car il est conçu pour être optimisé pour le web. Une animation Lottie est généralement créée avec Adobe After Effects et les plugins Bodymovin ou lottiefiles qui la convertissent en JSON.
Pourquoi créer mes propres lottie files ?
Les animations Lottie ne sont pas seulement esthétiques, elles sont également stratégiques.
- Légèreté et performance : Lottie est conçue pour être légère, avec des fichiers plus petits que les vidéos ou GIFs. Cela améliore la vitesse de chargement de votre site et contribue à l’expérience utilisateur.
- Interactivité dynamique : Tu peux rendre tes animations interactives, offrant ainsi une expérience plus engageante pour les utilisateurs.
- Contrôle complet : Tu as un contrôle total sur l’animation. Tu peux l’adapter à ta charte graphique et choisir exactement ce que tu souhaites mettre en avant.
Les 3 étapes pour créer tes propres lotties files
Dans cet article, je te guide à travers les étapes pour créer une animation Lottie, l’héberger sur LottieFiles, et l’intégrer efficacement dans ton site web pour un rendu entièrement personnalisé.
Étape 1 : Concevoir ton animation Lottie
1.1 Créer l’animation dans After Effects
Si tu souhaites créer une animation personnalisée, Adobe After Effects est le meilleur outil à utiliser. Voici les étapes détaillées pour démarrer ton animation :
- Définir la taille de l’animation : Avant de commencer, définis la taille de l’animation en fonction de l’espace que tu souhaites qu’elle occupe sur le site. Cela peut être une petite animation pour un bouton, ou une grande animation de fond.
- Créer les éléments graphiques : Utilise Illustrator ou les outils de dessin d’After Effects pour créer des éléments graphiques. Tu peux importer des fichiers vectoriels pour conserver la qualité nette même sur les écrans haute définition.
- Animer les éléments : Utilise les différentes fonctions d’After Effects (position, opacité, échelle, rotation, etc.) pour animer tes éléments. Crée des animations fluides et attrayantes, que ce soit pour des transitions, des éléments interactifs ou des animations de chargement.
- Prévisualisation de l’animation : Avant de passer à l’exportation, teste l’animation pour t’assurer qu’elle fonctionne bien sur toutes les résolutions d’écran et qu’elle est fluide sur différentes vitesses de connexion.
1.2 Exporter l’Animation avec Lottie files for After Effects ou bodymovin
Une fois que tu es satisfait de ton animation, l’étape suivante est l’exportation avec Lottie files ou bodymovin, des plugins pour After Effects qui te permettent de convertir tes animations en fichiers JSON compatibles avec Lottie.
- Télécharge Bodymovin ou Lottie files for After Effects : https://lottiefiles.com/plugins/after-effects
- Installe et active le plugin sur After Effets, si besoin voici un tuto à suivre : Installer lottiefiles pour after effect
- Exporte au format JSON : Allez dans After Effects, fenêtre, extensions, Lottiefiles ou bodymovin. Choisis les options d’exportation, comme le nom du fichier, et assure-toi de sélectionner la bonne résolution pour votre animation.
Remarque : Lottie files conserve uniquement les éléments animés, ce qui permet de conserver des fichiers légers tout en préservant la fluidité de l’animation.
1.3 Alternatives à After Effects pour créer des Animations Lottie
Si tu ne souhaites pas utiliser After Effects, il existe des alternatives comme Rive , Jitter ou LottieLab qui permettent de créer des animations Lottie directement en ligne, avec des interfaces plus simples. Quelques avantages et inconvénients :
- Rive : Très flexible pour les animations interactives. Permet de créer des animations dynamiques qui réagissent à l’interaction de l’utilisateur.
- Jitter : Outil plus accessible, parfait pour créer des animations rapides et légères.
- LottieLab : version bêta gratuite, idéale pour les animations plus simples.
Ces outils te permettent de créer des animations plus rapidement sans les complexités d’After Effects. Cependant, les options de personnalisation sont plus limitées.
Étape 2 : Héberger ton animation sur LottieFiles
Une fois l’animation créée et exportée en fichier JSON, l’étape suivante consiste à l’héberger sur une plateforme en ligne pour faciliter son intégration. LottieFiles est la plateforme idéale pour cela.
2.1 Créer un compte sur LottieFiles
Pour commencer, rendez-vous sur LottieFiles . Crée un compte gratuit pour pouvoir télécharger et gérer tes animations Lottie. Avec un compte, tu peux également accéder à des animations gratuites, que tu peux intégrer directement à tes projets.
2.2 Charger ton fichier JSON
Une fois ton animation créée, va dans la section upload sur LottieFiles et charge ton fichier JSON. LottieFiles gère parfaitement les fichiers de différentes tailles et t’offre un aperçu en temps réel de ton animation.
2.3 Personnaliser l’animation sur LottieFiles
LottieFiles permet une personnalisation rapide. Tu peux régler la vitesse, l’orientation et même l’interactivité de l’animation directement depuis la plateforme, sans avoir à retourner dans After Effects.
2.4 Obtenir le code d’intégration
Une fois le fichier chargé sur la plateforme, tu peux obtenir un code d’intégration simple à utiliser sur ton site web.
Étape 3 : Intégrer l’Animation Lottie sur ton site web
L’intégration d’une animation Lottie sur ton site est simple et flexible.
LottieFiles te fournit plusieurs formats d’intégration :
- Code Embed : À copier et coller directement dans ton code HTML.
- URL Directe : Si tu préfères charger l’animation directement via une URL.
Astuce : Si tu utilises une plateforme CMS comme WordPress, tu peux facilement ajouter le code d’intégration via un bloc HTML personnalisé ou un widget.
3.1 Intégration simple via Code Embed
- Colle le code d’intégration : sur LottieFiles, copie le code HTML ou JavaScript fourni et colle-le dans ta page. Tu peux l’ajouter dans un bloc HTML sur un CMS ou directement dans ton code source.
- Ajuste la taille et les propriétés : Modifie les dimensions de l’animation ou la vitesse d’exécution dans le code si nécessaire.
3.2 Optimisation de la Responsivité
Lottie permet d’ajuster facilement les animations pour qu’elles s’adaptent aux différentes tailles d’écran. Que tu utilises un responsive design ou une intégration plus spécifique pour les mobiles et tablettes, Lottie garantit que ton animation reste fluide et de bonne qualité.
3.3 Intégration du fichier JSON
Selon l’installation de ton site, tu peux aussi intégrer directement le fichier JSON sans passer par la plateforme Lottie.
Exemple : animation réalisée pour une cliente, guide conférencière en Normandie https://immersive-normandy.com/
Mon Approche : des sites web 100% personnalisés avec des animations Lottie sur mesure
Dans mes projets de création de sites web, j’aime offrir à mes clients des solutions entièrement personnalisées, y compris la conception d’animations Lottie sur mesure. Ces animations renforcent l’identité visuelle du site et contribuent à une meilleure expérience utilisateur.
Chaque projet bénéficie d’une attention particulière à l’intégration des animations : elles sont non seulement esthétiques mais également fonctionnelles, en guidant l’utilisateur tout au long de son parcours.
Cliquez ici pour en savoir plus sur nos offres site internet
Conclusion : crée une expérience unique pour tes utilisateurs
L’intégration d’animations Lottie dans ton site web est un excellent moyen de rendre ton site dynamique tout en préservant des performances nécessaires au bon fonctionnement et au bon référencement du site. Ces animations interactives ajoutent une valeur considérable en termes d’esthétique et de convivialité.
Si tu souhaites créer un site web entièrement personnalisé avec des animations Lottie uniques, n’hésite pas à me contacter. Ensemble, nous allons créer une expérience qui marquera tes utilisateurs.
