<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://assets9.lottiefiles.com/packages/lf20_gr2cHM.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.2],
            type: "stop",
            frames: [0]
        },
        {
            visibility:[0.2,0.45],
            type: "seek",
            frames: [0, 45]
        },
        {
            visibility:[0.45,1.0],
            type: "loop",
            frames: [45, 60]
        }
    ]
});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js
  2. https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-interactivity.min.js