# 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](https://unpkg.com/@lottiefiles/lottie-player@2.0.4/dist/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

```javascript
<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👇

![folder screenshot](https://cdn.hashnode.com/res/hashnode/image/upload/v1716773974633/880647b3-e2ce-4c8c-8a1a-b20ddd1ad0fc.png align="left")

```javascript
<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! 🚀👩‍💻👨‍💻