# Start animation when visible

**URL:** <https://forum.lottiefiles.com/t/start-animation-when-visible/2369>\
**Category:** Lottie in Web\
**Created:** [February 28, 2022, 7:53am UTC](https://forum.lottiefiles.com/t/start-animation-when-visible/2369 "2022-02-28T07:53:39Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![vicdilu](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/vicdilu/32/1675_2.png) [@vicdilu](https://forum.lottiefiles.com/u/vicdilu)\
**Post date:** [February 28, 2022, 7:53am UTC](https://forum.lottiefiles.com/t/start-animation-when-visible/2369/1 "2022-02-28T07:53:39Z")

</div>

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:

> **[How to Integrate Lottie Animations Into WordPress: Contact Form 7 Plugin -...](https://lottiefiles.com/blog/tips-and-tutorials/how-to-integrate-lottie-animations-into-wordpress-contact-form-7-plugin)**
>
> Discover the process of incorporating Lottie animations on WordPress form using Contact Form 7 (CF7).

```auto
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:

> **[Lottie Player - Interactivity Guide](https://lottiefiles.com/interactivity)**
>
> This is a quick demo for using the Lottie interactivity library with the Lottie Web Player component and the Lottie Player to add interactivity to your applications

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

```auto
<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:

```auto
<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