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

import { useRef } from "react";
import type { DotLottieRefProps } from "@dotlottie/react-player";
import { DotLottiePlayer, Controls, PlayerEvents } from "@dotlottie/react-player";
import "@dotlottie/react-player/dist/index.css";

const App = () => {
  const lottieRef = useRef<DotLottieRefProps>();
  
  useEffect(() => {
    // Play on scroll as soon as the animation is visible
    lottieRef.current?.playOnScroll();
    
    // Options:
    lottieRef.current?.playOnScroll({
        positionCallback: (position: number) => console.log(position),
        segments: [0, 50],
        threshold: [0.5, 1],
    });
    
    // Stop playing on scroll
    lottieRef.current?.stopPlayOnScroll();    
  }, [lottieRef]);
  return (
    <div>
      <DotLottiePlayer
        lottieRef={lottieRef}
        style={{ height: "500px" }}
        src="https://lottie.host/ffebcde0-ed6d-451a-b86a-35f693f249d7/7BMTlaBW7h.lottie"
        autoplay
        loop
      >
        <Controls />
      </DotLottiePlayer>
    </div>
  );
};

export default App;

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.