DotLottie React - Runtime Error: Memory access out of bounds

[mabernethy]

Overview

I have a Lottie file in JSON that my team has been using with an older Lottie player (LottieLight). We're looking to upgrade to better Lottie player with smaller animation files. As part of that work, I've integrated the DotLottieReact component into our codebase. In my initial tests, I converted one of our existing JSON files into a .lottie file using the website https://lottiefiles.com/tools/lottie-to-dotlottie .

In my first initial hacked together proof of concept, I got the animation working as I would expect. No errors or anything. I then built out a more robust proof of concept, and converted another JSON file into a .lottie file (Attached here as a Zip file). However, when I try to display this lottie file in the browser, I continually get "Uncaught Runtime Error: memory access out of bounds" errors."

Browser: Latest version of Chrome OS: MacOS Sonoma 14.7 Machine: M3 Macbook Pro RAM: 32 Gb

dotlottie-memory-issue.lottie.zip

...

Consuming repo

What repo were you working in when this issue occurred? DotLottie React ...

Labels

Type: Bug

• [x] Add the Type: Bug label to this issue.

[theashraf]

@mabernethy which version of DotLottieReact you're using ?

[aldibatyr]

@theashraf experiencing the same issue on 0.9.3 version.

interestingly, when you set a style to less than 150px the file loads.

[nasringh]

I have the same issue what is the solution for it??

[aldibatyr]

noticed that the 0.10.0 version was released today, but the issue is still there. Both .lottie and .json files fail to run using dotlottie-react.

[theashraf]

@nasringh @aldibatyr can you share with me your .lottie or .json asset ?

[theashraf]

@mabernethy I'm not able to replicate the same issue on the latest version of dotlottie-react, maybe it was a different asset ?

You can try testing it again on the dotLottie Viewer -> https://lottiefiles.github.io/dotlottie-web/

[aldibatyr]

@theashraf the files that are exported with lottie plugin from figma create that error. Lotties exported from AE are okay.

[aldibatyr]

Just tested the files that are hosted in lottiefiles and they work remotely or when downloaded and stored locally.

[aldibatyr]

@nasringh @mabernethy could you also check various files exported via figma vs Adobe After Effects?

[theashraf]

@theashraf the files that are exported with lottie plugin from figma create that error. Lotties exported from AE are okay.

@aldibatyr if you can share with me one or few problematic assets, that would help me investigate the root cause

[aldibatyr]

Sure! @theashraf attaching the file flow1.json

[theashraf]

@aldibatyr I'm not encountering the Memory access out of bounds issue, but I have noticed some inconsistent rendering. Is that the issue you're experiencing ?

[aldibatyr]

@theashraf the issue was indeed Memory access out of bounds the page would simpy freeze.

[aldibatyr]

let me try creating a reproducible demo. I'll come back 👍

[theashraf]

Thanks @aldibatyr i was able to reproduce it here, let me come back with a solution https://codepen.io/lottiefiles/pen/ExqBprW?editors=0010

[aldibatyr]

@theashraf great! Thanks a lot!