Start animation when visible

Lottie in Web
1

Hi,

I am adding a lottie animation in a wordpress website with the lottie player.

I have enqueue the scripts (lottie player and lottie interactivity javascript files) following this tutorial:

wp_enqueue_script( 'lottie-player', get_stylesheet_directory_uri() . '/js/lottie-player.js', array(), '', true );
wp_enqueue_script( 'lottie-interactivity', get_stylesheet_directory_uri() . '/js/lottie-interactivity.min.js', array(), '', true );

For the interactivity I have followed this tutorial:

The interactivity works fine If I use mode: cursor, for example with this script:

<script>
LottieInteractivity.create({
    player:'#firstLottie',
    mode:"cursor",
    actions: [
        {
            type: "click",
            forceFlag: false
        }
    ]
});
</script>

But I am not able to start animation when the lottie player is visible:

<script>
LottieInteractivity.create({
    player:'#firstLottie',
    mode:"scroll",
    actions: [
        {
        visibility: [0, 1.0],
        type: "play"
        }
    ]
});
</script>

With this last script the lottie player animates while I scroll down, but it does not play the whole animation as I expected.

Any help would be appreciated.

Thanks in advance