Play on scroll

For a quick way to sync your animation to the page scroll.

play-on-scroll

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 on scroll as soon as the animation is visible
player.playOnScroll();

// Options:
player.playOnScroll({
    positionCallback: (position: number) => console.log(position),
    segments: [0, 50],
    threshold: [0.5, 1],
});

// Stop playing on scroll
player.stopPlayOnScroll();

Argument	Type	Description
positionCallback	(position: number) => void	Callback method that passes the current position of the animation relative to the view port.
segments	[number, number]	Frame segment to play whilst scrolling
threshold	[number, number]	Position threshold needed to start playing the animation when scrolling. For example [0.5, 1] will start syncing the animation on scroll when it is half way down the view port.