Code for Lottie to play on visibility

Lottie in Web
1

Hi there. I am trying to customize a lottie player to play a lottie once on view. Here is the code I am trying to work with:

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets10.lottiefiles.com/packages/lf20_8wrnuyjy.json"  
background="transparent"  
    mode:"scroll",
    actions: [
        {
        visibility: [0.50, 1.0],
        type: "play"
        }
    ]
speed="2"  
style="width: 600px; height: 600px;"  

></lottie-player>```
2

For anyone who finds themselves here, I did discover the solution. You need to call both the Lottie player and the Lottie Interactivity scripts. It is not just one script. Here is the code I used, you can customize it to your choosing.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player id="twelfthLottie" src="https://assets10.lottiefiles.com/packages/lf20_8wrnuyjy.json" background="transparent" speed="2" style="width: 600px;" autoplay=""></lottie-player></center>

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script>
LottieInteractivity.create({
    player:'#twelfthLottie',
    mode:"scroll",
    actions: [
        {
        visibility: [0.30, 1.0],
        type: "play"
        }
    ]
});
</script>