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 !
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>
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
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%.
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é !
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.