Conflicting IDs between two Lottie clips on page

[jcpux]

I've got two different Lottie clips on a page and they both declare a gradient with the same ID <linearGradient id="__lottie_element_31" spreadMethod="pad" gradientUnits="userSpaceOnUse" x1="-301.201995.... and <linearGradient id="__lottie_element_31" spreadMethod="pad" gradientUnits="userSpaceOnUse" x1="-230.79499816.....

Then, when one of the paths tries to use it's respective gradient <path stroke="url(#__lottie_element_31)" ... ... it ends up using the other one since its own gradient's ID has been usurped.

Is there a way to specify a string to be appended to all of a clip's IDs (e.g. "__lottie_element_31_this-clip" & "__lottie_element_31_that-clip") ...or something like that to ensure unique IDs?

Here's the page.. you can see at the bottom, one of the rays is purple and does not match the others. https://www.moveworks.com/return-to-work-with-employee-service-automation side note... This page is built in a CMS so the two different clips are activated in two distinct "modules", hence the two separate scripts.

[bodymovin]

hi, I see that you're loading the library multiple times. When you compile your modules, can you shim the library somehow so it's not loaded multiple times? Besides the id conflict, having multiple instances can affect load time and performance. Having said that, you can call lottie.setIDPrefix('prefix1') on each instance of the library to avoid id conflicts.

[rightnowmedia]

Hi there, can you provide an example of how setIDPrefix would be used?

[georgec12104531]

In react, looks like doing setIDPrefix before loadAnimation did the trick. This helped create unique ids for the in the , inside the rendered in the Browser.

const LottieAnimation = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    // Render the animation
    lottie.setIDPrefix("my-unique-prefix");
    const anim = lottie.loadAnimation({
      container: containerRef.current,
      renderer: "svg", // You can choose the renderer (svg, canvas, html)
      loop: true,
      progressiveLoad: true,
      autoplay: true,
      animationData: animationData // Your Lottie JSON animation data
    });

    return () => {
      // Cleanup
      anim.destroy();
    };
  }, []);

  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
};

export default LottieAnimation;