# Play on scroll, do not repeat if scrolled again

**URL:** <https://forum.lottiefiles.com/t/play-on-scroll-do-not-repeat-if-scrolled-again/3506>\
**Category:** Lottie in Web\
**Created:** [October 11, 2022, 2:10pm UTC](https://forum.lottiefiles.com/t/play-on-scroll-do-not-repeat-if-scrolled-again/3506 "2022-10-11T14:10:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan.gray](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/dan.gray/32/224_2.png) [@dan.gray](https://forum.lottiefiles.com/u/dan.gray)\
**Post date:** [October 11, 2022, 2:10pm UTC](https://forum.lottiefiles.com/t/play-on-scroll-do-not-repeat-if-scrolled-again/3506/1 "2022-10-11T14:10:12Z")

</div>

I have a web page where I have numerous Lottie animations throughout. These animations are non-repeating.

Because the animations were running as soon as the page was loaded and those further down the page were long finished by the time the viewport showed them, I used lottie-interactivity to check for the player visibility before playing, and this did the trick.

However, I have now noticed that once the animation is complete, if I scroll, it will start over, which I do not want.

The outcome I need is that the animation will only start once the player is visible in the viewport, but once the animation is complete, it will remain at the last frame.

This is the code I have

```auto
import _forEach from 'lodash/forEach';
import { create } from '@lottiefiles/lottie-interactivity';

const lottiePlayers = document.querySelectorAll('lottie-player');

if (lottiePlayers) {
    _forEach(lottiePlayers, (lottiePlayer) => {
        let lottiePlayerParent = lottiePlayer.parentNode;
        let lottiePlayerId = '#' + lottiePlayer.id;

        create({
            player: lottiePlayerId,
            mode:"scroll",
            actions: [{
                visibility: [0.30, 1.0],
                type: "play"
            }]
        });
    }
});

```

---

<div class="post-metadata">

**Author:** ![haleeza](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/haleeza/32/4969_2.png) [@haleeza](https://forum.lottiefiles.com/u/haleeza)\
**Post date:** [October 19, 2022, 5:01am UTC](https://forum.lottiefiles.com/t/play-on-scroll-do-not-repeat-if-scrolled-again/3506/2 "2022-10-19T05:01:46Z")

</div>

This can be resolved by changing

```auto
type: 'play'

```

to

```auto
type: 'playOnce'

```

It should achieve their desired outcome 🙂

We have updated the info here: [Animation Modes - Lottie-Interactivity](https://docs.lottiefiles.com/lottie-interactivity/animation-modes#animate-when-visible-and-play-once)