I used a Lottie animation on a webpage using react and nextjs. (Simple landing page) I stared using @lottiefiles/dotlottie-react for an image-based animation. I works decently when I had just one, but when I stared adding more animations It started to perform worst. (Framerate drops, it got choppy on scroll) I tried using json files, lottie files, and hosted lottie url. But all of then had the same issue. Then I changed to start using iframe based animation, what I found amazingly good. It still not perfect but it is mush better. Can somebody explain to me why it is that different?
Hello,
Rendering Overhead: Lottie animations, especially when using JSON files, are rendered using JavaScript and can be quite resource-intensive. When you add multiple animations, the browser has to handle more rendering tasks simultaneously, which can lead to frame rate drops and choppiness. pasco connect
Browser Performance: Different browsers handle animations differently. Some might be more optimized for handling multiple animations, while others might struggle, especially on scroll events where the browser is already doing a lot of work.
Iframe Isolation: When you switched to using iframe-based animations, you likely saw an improvement because iframes isolate the animation rendering from the main page. This means the main page’s performance isn’t as heavily impacted by the animations, leading to smoother performance.
Resource Management: Iframes can manage resources more efficiently in some cases, as they can offload some of the rendering work to a separate process. This can help in reducing the overall load on the main thread, resulting in better performance.
Best Regards
katty867