Random out of memory and crashes loading a particular animation

Tell us about your environment

• Browser and Browser Version: Chrome Version 75.0.3770.100 (Official Build) (64-bit) lottie-web 5.5.3
• After Effects Version: Unknown but lottie version seems to be 5.5.2.

What did you do? Please explain the steps you took before you encountered the problem. I use lottie inside a react component and use props to control which animation json to load and play. For the 7 clips that I play in a sequence, 1 of them frequently causes OOM and freezes the browser.

What did you expect to happen? All clips should play normally without causing memory issues.

What actually happened? Please include as much relevant detail as possible. I have a AnimationController component that loads the next animationData to Animation component based on complete event of the previous one. Code below

AnimationController = () => {
  const [currentAnimation, setAnimation] = useState(0);
  const {
    loop,
    data,
    segments,
    speed,
  } = animations[currentAnimation];

  const options = {
    loop,
    animationData: data,
    segments,
  };

  const listeners = [
    {
      eventName: 'complete',
      callback: () => {
        if (currentAnimation < animations.length - 1) {
          setAnimation(currentAnimation + 1);
        }
      },
    },
  ];

  return (
    <Animation
      speed={speed}
      options={options}
      eventListeners={listeners}
    />
  );
})

const Animation = ({
  options: { loop = true, autoplay = false, segments, animationData },
  eventListeners,
  speed,
  ...props
}: Props) => {
  const container = useRef(null);

  useEffect(() => {
    const options = {
      container: container.current,
      renderer: 'svg',
      loop,
      autoplay,
      animationData,
    };

    const anim = lottie.loadAnimation(options);
    anim.setSpeed(speed);
    registerEvents(anim, eventListeners);

    const play = () => {
      if (segments) {
        anim.playSegments(segments, true);
      } else {
        anim.play();
      }
    };
    anim.addEventListener('DOMLoaded', play);

    return () => {
      deregisterEvents(anim, eventListeners);
      anim.removeEventListener('DOMLoaded', play);
      anim.destroy();
    };
  }, [animationData]);

  return <div {...props} ref={container} />;
};

When the spiral animation (link below) is loaded and starts playing, there is a chance the browser freezes and I can observe memory usage skyrocketing and fan working like crazy. Eventually, if I have dev console open, Chrome will pause at the line that causes out of memory.

However, this doesn’t happen every time and doesn’t happen when I loop it after the initial load. Only when it is loaded for the first time after another animation does this happen.

This also doesn’t happen to any of my other clips, which lead me to believe that something special about this clip was able to trigger some recursive memory allocation that doesn’t end properly.

Please provide a download link to the After Effects file that demonstrates the problem. spiral.json.zip

[wuhao1117]

I used the JSON.parse(JSON.stringify(animationData)) trick and it hasn’t crashed once so far. Thanks a lot for that!

I’m still curious though. Is there any reason lottie will modify the original animationData when loading it? It’s a confusing and unexpected behavior that leads to user error like I did.

Could the source data be cloned inside the library before being used or could the mutation of the object be avoided altogether? It might slow down the initial load if the animationData is big enough whether it’s done by user or the library. I myself use a json that’s over 1MB in the same project.

[bodymovin]

The second reason is probably the one that’s breaking after re checking the code you shared. I guess animationData is being imported somewhere and passed down to this component every time you load an animation. If you pass the same animationData several times, you are passing the same object, and Lottie uses and modifies that object every time it loads a new animation. Repeatears, because of the way they work, create this type of nested elements and spike on memory. You probably should pass the animation data down by doing JSON.parse(JSON.stringify(animationData )) and it will work fine.