I want to animate my logo, and for that I made a lottie file.
(pontos lottie animation by Nicolas van der Straten Ponthoz - LottieFiles)
When I add this to my website, I want it to animate on mouse-over, and to animate back when the mouse leaves. this works just fine.
My problem is that after the animation is completed, it disappears, just blank. When the mouse leaves, the animation comes back and reverse plays as expected. I just don’t get how I can prevent my animation to disappear.
My code:
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
<div class="hoverEffects">
<dotlottie-player
src="https://lottie.host/7d1af36b-e8af-4abd-a803-012f04e3b67a/oJeJI7q6p1.json"
style="width: 200px;"
>
</dotlottie-player>
</div>
<script>
const playerContainers = document.querySelectorAll(".hoverEffects");
playerContainers.forEach(container => {
const player = container.querySelector("dotlottie-player")
container.addEventListener("mouseover", () => {
player.setDirection(1);
player.play();
});
container.addEventListener("mouseleave", () => {
player.setDirection(-1);
player.play();
});
});
</script>