Solving Memory Issues with Lottie SVG Animations
Tags: webdev, javascript, tutorial, programming
Published: 2024-05-22 09:07:35

## **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 :point_down:

![folder screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zgjzbixpk33vs5u8yi.png)
```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! 🚀👩‍💻👨‍💻