<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://assets6.lottiefiles.com/packages/lf20_QpeChC.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;
}


.my-font {
font-family: 'Roboto Mono', monospace;
}
let player = document.getElementById("firstLottie");

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js
  2. https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js