# Playing an animation once and then triggering a loop

**URL:** https://forum.lottiefiles.com/t/playing-an-animation-once-and-then-triggering-a-loop/5307
**Category:** Uncategorized
**Created:** [January 31, 2024, 10:04pm UTC](https://forum.lottiefiles.com/t/playing-an-animation-once-and-then-triggering-a-loop/5307 "2024-01-31T22:04:01Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Julian](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/julian/32/2966_2.png) [@Julian](https://forum.lottiefiles.com/u/Julian)
#### Post date: [January 31, 2024, 10:04pm UTC](https://forum.lottiefiles.com/t/playing-an-animation-once-and-then-triggering-a-loop/5307/1 "2024-01-31T22:04:01Z")

</div>

https://codepen.io/japongnet/embed/preview/rNRdNXL?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=rNRdNXL

I’ve been trying to get an animation playing correctly with the Lottie web player, but I’ve been running into some difficulty.

I would like the animation to trigger on scroll, playing the first 60 frames. After that, I would like to loop frames 61 to 300. I can currently manage a somewhat janky version of this by using two scroll triggers, but i’d much rather the 61-300 frame loop to simply begin automatically after playing frames 0-60, without any additional scrolling required.

Does anyone know how to accomplish this? I’ve tried searching through some of the docs but can’t figure out how to do this.

---

<div class="post-metadata">

### Author: ![pizza](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/pizza/32/3389_2.png) [@pizza](https://forum.lottiefiles.com/u/pizza)
#### Post date: [February 7, 2024, 8:59am UTC](https://forum.lottiefiles.com/t/playing-an-animation-once-and-then-triggering-a-loop/5307/2 "2024-02-07T08:59:00Z")

</div>

Hi Julian, is this something you mean by trigger on scroll?  
So if you change it to `seek`, your animation will only play 0-60 frames when scrolling down; after that it will start looping from 61-300.

```js
LottieInteractivity.create({
    player: '#firstLottie',
    mode: 'scroll',
    actions: [
        {
            visibility: [0, 0.2],
            type: 'stop',
            frames: [0],
        },
        {
            visibility: [0.2, 0.5],
            type: 'seek',
            frames: [0, 60],
        },
        {
            visibility: [0.5, 1],
            type: 'loop',
            frames: [61, 300],
        },
    ],
});

```
