<div class="first-section">
  <h1 style="text-align: center">Scroll to play the Lottie animation</h1>
</div>
<div class="second-section">
  <lottie-player
                 id="firstLottie"
                 src="https://assets5.lottiefiles.com/packages/lf20_FISfBK.json"
  >
  </lottie-player>  
</div>
<div class="third-section">
  
</div>

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
.first-section {
 background-color: white;
  height: 100vh;
  width: 100%;
}

.second-section {

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

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

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

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

player.addEventListener("ready", () => {
  LottieInteractivity.create({
			  mode:"scroll",
			  player: "#firstLottie",
			  actions: [
        {
            visibility:[0, 1.0],
            type: "seek",
            frames: [0, 300],
        },
        ]
			});
});