Showing double Animation on web page

Lottie in Web
1

I used this code in Nextjs and it showing 2 instances of animation.

const container = useRef(null);

useEffect(() =>{
    lottie.loadAnimation({
      container: container.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: require("../../public/jsonanims/growBusiness.json"),
    });
    lottie.setSpeed(0.4);
}, [])
1 Like
2

you have destroy the animation.Then it will show only one lottie animation.
useEffect(() => {
const animation= lottie.loadAnimation({
container: animationContainer.current,
renderer: ‘svg’,
loop: true,
autoplay: true,
path: ‘/animation.json’
});
return () => animation.destroy();
}, );

1 Like
3

really helpful. thanks )