How to let lottie file have full width height of screen when resize

[joshua-isaac]

@lazarus2019 I created a helper function to help with this, changing the preserveAspectRatio attribute helped with the lottie size on resize:

import { LottieContainer } from "./constants";

export const svgHelper = () => {
  const lottie = document.getElementsByClassName(
    LottieContainer
  )[0] as HTMLDivElement;

  const svg = lottie.getElementsByTagName("svg")[0];

  if (svg) {
    svg.setAttribute("preserveAspectRatio", "xMidYMid slice");
  }
};

Then I just call it inside a useEffect:

  useEffect(() => {
    svgHelper();
  }, []);

Works for me

[joshua-isaac]

@lazarus2019 looking at it now, looks like you can use the renderSettings prop on the <Lottie /> component:

 <Lottie
    lottieRef={lottieRef}
    animationData={scrollLottieReveal}
    autoplay={false}
    rendererSettings={{
       preserveAspectRatio: "xMidYMid slice",
    }}
 />