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

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 as soon as the animation is visible
    lottieRef.current?.playOnShow();
    
    // Options:
    lottieRef.current?.playOnShow({
        threshold: [0.5],
    });
    
    // Stop playing on show
    lottieRef.current?.stopPlayOnShow();    
  }, [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
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.