Playing an animation once and then triggering a loop

1

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.

2

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.

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],
        },
    ],
});