Play on show

For a quick way to play your animation when it appears on screen.

play-on-show

Add the dotLottie player to the page

<dotlottie-player autoplay loop src="/interactive_animation.lottie" id="player"></dotlottie-player>

const player = document.getElementById("player");

// Play as soon as the animation is visible
player.playOnShow();

// Options:
player.playOnShow({
    threshold: [0.25],
});

// Stop playing on show
player.stopPlayOnShow();

Argument	Type	Description
threshold	number[]	Visibility threshold needed to start playing the animation. For example [0.25] will start playing the animation when a quarter of the animation container is visible.