Web Community,

I’m working on a React web project where I need to display 300 animated emojis on a single canvas. Each emoji will be a Lottie animation, and I aim to achieve smooth performance and minimal load times. Here are some specifics:

• Canvas-Based Approach: I want to render all emojis on a single HTML canvas element.
• Animation Control: Each emoji should maintain its individual animation, but they will all be displayed simultaneously.
• Performance Optimization: With a large number of animations, I’m concerned about performance and memory usage.

Given these requirements, what would be the best approach to implement this? Are there any specific strategies or techniques within lottie-web that could help optimize rendering and performance for such a large number of animated elements?

Any code examples, libraries, or performance tips would be greatly appreciated!