<div class="first-section">
<h1 style="text-align: center">Play segments</h1>
</div>
<div class="second-section">
<lottie-player
id="firstLottie"
src="https://assets5.lottiefiles.com/packages/lf20_4fET62.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, 1],
type: "loop",
frames: [70, 500]
}
]
});
});
This Pen doesn't use any external CSS resources.