Solving Memory Issues with Lottie SVG Animations

Introduction

Integrating Lottie SVG animations can significantly enhance the visual appeal of a website. However, the process can sometimes introduce performance issues, particularly with excessive memory usage.

This post details my experience with integrating Lottie animations using the vue3-lottie package in a Vue 3 application and the subsequent challenges I faced. I will also outline the solution that resolved these issues, ensuring smoother performance and better resource management.

The Problem

While incorporating multiple SVG animations via the vue3-lottie package, I noticed a severe performance degradation. The system memory usage would spike dramatically, causing the site to slow down and become unresponsive.

Detailed Observations

1. Memory Spike - Enabling autoplay and infinite looping with the vue3-lottie component caused the browser's memory usage to spike between 700MB and 3000MB.

2. Memory Leak Suspicions - Even after attempting to manage the lifecycle of the components by destroying them appropriately, the memory usage remained excessively high, indicating a potential memory leak.

3. Inconsistent Memory Recycling - The browser's memory recycling mechanism failed to effectively manage the memory usage, maintaining it at a high level even after the animations stopped.

Investigative Findings

Upon thorough investigation, I discovered that the root cause lay within the vue3-lottie package itself. Specifically, using the package for SVG rendering with looping and autoplay enabled caused continuous memory consumption growth, eventually leading to a performance bottleneck.

Memory Usage Analysis

• Initial Load - Memory usage starts at around 200MB.

• After 10-30 Seconds - Memory usage increases to between 700MB and 1800MB.

• Memory Recycling - Ineffective, maintaining around 600MB even after it triggers.

The Solution

The solution was to switch from using the vue3-lottie package to directly importing the Lottie player script. This approach dramatically reduced the memory footprint and stabilized performance.

Implementation Steps

1. Stop Using vue3-lottie: Discontinue the use of vue3-lottie and lottie-web due to their associated memory management issues.

2. Import Lottie Player Script: You can import online and download from Lottie player js and use the script tag to import lottie-player.js from LottieFiles.

Code Example Below is the code implementation that resolved the memory issues:

Old Implementation with vue3-lottie package

<template>
  <vue3-lottie
    :options="defaultOptions"
    :height="400"
    :width="400"
    autoplay
    loop
  />
</template>

<script setup>
import { reactive } from 'vue';
import vue3Lottie from 'vue3-lottie';
import animationData from '@/assets/animation.json';

const defaultOptions = reactive({
  animationData,
});
</script>

New Implementation with importing lottie-player.js

You can maintain the file like below👇

<template>
  <lottie-player
    ref="heroLottie"
    :src="lottieHeroSectionData"
    speed="1"
    direction="1"
    mode="normal"
    loop
    autoplay/>
</template>

<script setup>
    import {lottieHeroSectionData} from "@frontendApp/views/agent/landing/pages/homepage/lottie";
    import {onBeforeMount} from "vue";
    import "@frontendApp/views/agent/landing/assets/js/lottie-player.js"

    const heroLottie = ref(null);

    onBeforeMount(() => {
        if (heroLottie.value) {
            heroLottie.value.destroy()
        }
    })
</script>

Benefits Observed

• Reduced Initial Memory Usage: Around 100MB after page load.

• Effective Memory Recycling: Memory usage stabilized at approximately 200-400MB after recycling.

• Elimination of Lag: The site became responsive and stable, eliminating the lag and crashes.

---

Conclusion

Incorporating Lottie SVG animations can significantly enhance user experience, but it's crucial to monitor and manage the performance implications. Switching from the vue3-lottie package to directly importing the Lottie player script proved to be an effective solution to address memory leaks and performance issues. This approach ensures smoother animations and a more responsive website, saving both time and resources. If you encounter similar issues, consider using the Lottie player script for a more efficient and reliable implementation.

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions. 😎😎

Till then, Keep on Hacking, Cheers

Happy coding! 🚀👩‍💻👨‍💻