Envie d'animer vos illustrations en évitant d'avoir des images trop lourdes ? Vous souhaitez peut-être même gérer la vitesse de celle-ci ? Vous êtes au bon endroit ! Découvrez comment animer des illustrations SVG avec Lottie !
1ère étape
Dans cette première étape, nous devons intégrer Lottie. Pour ce faire, nous allons utiliser la librairie Lottie-Player : https://github.com/LottieFiles/lottie-player.
Il suffit d'ajouter la balise script ci-dessous :
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>
2ème étape
Nous devons maintenant chercher une illustration SVG animée. Attention, nous voulons télécharger l'illustration animée sous format json. Heureusement, de très nombreux sites proposent ce genre d'animations, comme Drawkit ou par exemple Lottie lui-même.
Nous allons partir sur celle-ci : https://lottiefiles.com/4986-cookiesmilk
3ème étape
Ajoutons notre balise lottie-player :
<lottie-player src="https://assets4.lottiefiles.com/temp/lf20_IAVB8U.json" autoplay loop speed="15"></lottie-player>Vous pouvez remarquer que les deux options : autoplay et loop, nous permettent de jouer notre animation dès que notre page est chargée, de façon infinie (donc en boucle).
Ceci peut tout d'abord paraître étrange, mais ce que vous devez remarquer ici, c'est qu'il s'agit d'une balise HTML qui n'existe pas et qui n'a que pour seul objectif d'être récupéré par la Lottie pour pouvoir afficher notre animation SVG, c'est aussi simple que ça.
L'attribut speed permet de donner une vitesse à notre animation. La valeur par défaut est égale à 1. Si vous mettez 0.1, votre animation sera ralentie de 90%.
4ème étape
Pour finir notre animation, stylisons-là !
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #ffe268;
}
lottie-player {
height: auto;
width: 700px;
}Et le tour est joué !