Play on scroll, do not repeat if scrolled again

Lottie in Web
1

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

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

This can be resolved by changing

type: 'play'

to

type: 'playOnce'

It should achieve their desired outcome :slight_smile:

We have updated the info here: Animation Modes - Lottie-Interactivity