Lottie files using repeaters leak
radegran opened this issue · 5 comments
Tell us about your environment
lottie-web v5.6.8.
-
Browser and Browser Version:
Tested in latests Safari/Chrome -
After Effects Version:
Not sure. But lottie json files are available. See below.
What did you do? Please explain the steps you took before you encountered the problem.
This call loads an animation:
lottie.loadAnimation({ animationData: json, autoplay: true, container: elem, loop: true, renderer: 'svg', })
I repeat this call with different container elements but using the same json reference.
What did you expect to happen?
Identical animations running in different containers.
What actually happened? Please include as much relevant detail as possible.
For every new animation the number of elements in the svg tag grows exponentially. Seems to be related to the use of "repeaters". Reusing the json data structure quickly leads to performance problems if rendering the animation many times. I could deep clone the json each time and the problem goes away but I would like to avoid that.
Please provide a download link to the After Effects file that demonstrates the problem.
Go to https://leaky-lottie.netlify.app/isolated.html for a demonstration of the problem. View page source.
Hi, that is correct, when using repeaters, you should provide a new instance of the animation instead of reusing the same one.
Thank you for the quick feedback.
Just to be clear, I assume that with an 'instance of the animation' you mean the animationData object provided to the loadAnimation function.
As a developer though, I can't tell if the designer has prepared an animation using repeaters or not. As far as I understand, I should not need to know - that is just an implementation detail at the designer end? Maybe I have misunderstood something here?
Based on the answer provided, I see two ways forward. Either I go tell the designers not to use repeaters in their work and write an automated test checking for repeaters in the .json files (is there a nice way to find out?), or I always deep clone the animation data object whenever it is used.
Perhaps there are some best practises I have missed?
I agree that the repeaters issue should be transparent to developers. But the trade off of serializing an animation every time is something that I don't want the library to do every time either.
I need to search for a better solution that doesn't need this, but repeaters are complex.
In the meantime, I'd suggest that you store the animation as a string instead of a js literal (which also has much better performace when parsing it, you can check here why: https://www.youtube.com/watch?v=ff4fgQxPaO0)
And pass a new instance every time you load the animation.
Unless you are doing this thousands of times, reusing the same json object doesn't give much benefit.
Interesting performance tip! But to be honest, performance is not really a problem right now. So yes I could even replace "animationData: data" with "animationData: JSON.parse(JSON.stringify(data))" to get things working fine. Its just annoying to read and leaves the reader with the question "why can't I just delete that redundant code?".
Performance aside. I always (well I don't have that many days of experience with lottie!) thought that the json file was an immutable definition only and assumed that lottie.loadAnimation modifies the DOM only with the help of an internal data structure that references the definition and the DOM. Now I'm sure it is not that trivial...
Anyway., if it was for me to decide I would leave this issue open until the animation data is not modified, or if the API somehow can suggest that lottie takes ownership and kind of consumes the data object.
Tell us about your environment lottie-web v5.6.8.
- Browser and Browser Version:
Tested in latests Safari/Chrome- After Effects Version:
Not sure. But lottie json files are available. See below.What did you do? Please explain the steps you took before you encountered the problem. This call loads an animation:
lottie.loadAnimation({ animationData: json, autoplay: true, container: elem, loop: true, renderer: 'svg', })I repeat this call with different container elements but using the same json reference.
What did you expect to happen? Identical animations running in different containers.
What actually happened? Please include as much relevant detail as possible. For every new animation the number of elements in the svg tag grows exponentially. Seems to be related to the use of "repeaters". Reusing the json data structure quickly leads to performance problems if rendering the animation many times. I could deep clone the json each time and the problem goes away but I would like to avoid that.
Please provide a download link to the After Effects file that demonstrates the problem. Go to https://leaky-lottie.netlify.app/isolated.html for a demonstration of the problem. View page source.
clone