<div class="first-section">
  <h1 style="text-align: center">Hover on container to play animation</h1>
</div>

<div style="width: 30%; height: 30%; justify-content: center; align-items: center; margin: auto">
  <lottie-player
                 id="firstLottie"
                 src="https://assets5.lottiefiles.com/packages/lf20_zPo7NV.json"
                 style="border-color: red; border-style: solid; border-width: 5px"
  >
  </lottie-player> 
</div>

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

.first-section {
 background-color: white;
}

.second-section {

  height: 100vh;
  width: 100%;
 background-color: white; 
}

.third-section {
  height: 100vh;
  width: 100%;
 background-color: white;  
}

h1 {
font-family: 'Roboto Mono', monospace;
}


.my-font {
font-family: 'Roboto Mono', monospace;
}

let player = document.getElementById("firstLottie");

player.addEventListener("ready", () => {
LottieInteractivity.create({
    player: "#firstLottie",
    mode:"cursor", 
    actions: [ { type: "hover", forceFlag: false } ]
});
});