diff --git a/.changeset/cuddly-laws-clap.md b/.changeset/cuddly-laws-clap.md
new file mode 100644
index 00000000..3cd0bf93
--- /dev/null
+++ b/.changeset/cuddly-laws-clap.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat: 🎸 add destroy method
diff --git a/apps/dotlottie-web-example/src/main.ts b/apps/dotlottie-web-example/src/main.ts
index 7bea8079..c496f0b0 100644
--- a/apps/dotlottie-web-example/src/main.ts
+++ b/apps/dotlottie-web-example/src/main.ts
@@ -44,6 +44,7 @@ app.innerHTML = `
+
`;
@@ -73,8 +74,10 @@ allCanvas.forEach((canvas) => {
fetch('/hamster.lottie')
.then(async (res) => res.arrayBuffer())
.then((data): void => {
+ const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+
const dotLottie = new DotLottie({
- canvas: document.getElementById('canvas') as HTMLCanvasElement,
+ canvas,
// src: 'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',
// src: '/lolo.json',
data,
@@ -89,6 +92,13 @@ fetch('/hamster.lottie')
const loopToggle = document.getElementById('loopToggle') as HTMLInputElement;
const speedSlider = document.getElementById('speed') as HTMLInputElement;
const speedValueSpan = document.getElementById('speed-value') as HTMLSpanElement;
+ const destroyButton = document.getElementById('destroy') as HTMLButtonElement;
+
+ destroyButton.addEventListener('click', () => {
+ canvas.remove();
+
+ dotLottie.destroy();
+ });
playPauseButton.addEventListener('click', () => {
if (dotLottie.playing) {
diff --git a/packages/web/README.md b/packages/web/README.md
index 3ac24dd2..c7bfd600 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -132,16 +132,17 @@ const dotLottie = new DotLottie({
### Methods
-| Method | Description |
-| --------------------------------------------------------- | --------------------------------------------------------------------------------------- |
-| `play()` | Begins playback from the current animation position. |
-| `pause()` | Pauses the animation without resetting its position. |
-| `stop()` | Halts playback and returns the animation to its initial frame. |
-| `setSpeed(speed: number)` | Sets the playback speed with the given multiplier. |
-| `setLoop(loop: boolean)` | Configures whether the animation should loop continuously. |
-| `setFrame(frame: number)` | Directly navigates the animation to a specified frame. |
-| `addEventListener(event: string, listener: Function)` | Registers a function to respond to a specific animation event. |
-| `removeEventListener(event: string, listener?: Function)` | Removes a previously registered function from responding to a specific animation event. |
+| Method | Description |
+| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `play()` | Begins playback from the current animation position. |
+| `pause()` | Pauses the animation without resetting its position. |
+| `stop()` | Halts playback and returns the animation to its initial frame. |
+| `setSpeed(speed: number)` | Sets the playback speed with the given multiplier. |
+| `setLoop(loop: boolean)` | Configures whether the animation should loop continuously. |
+| `setFrame(frame: number)` | Directly navigates the animation to a specified frame. |
+| `addEventListener(event: string, listener: Function)` | Registers a function to respond to a specific animation event. |
+| `removeEventListener(event: string, listener?: Function)` | Removes a previously registered function from responding to a specific animation event. |
+| `destroy()` | Destroys the renderer instance and unregisters all event listeners. This method should be called when the canvas is removed from the DOM to prevent memory leaks. |
### Static Methods
diff --git a/packages/web/src/dotlottie.ts b/packages/web/src/dotlottie.ts
index 6a0e1b18..d6e1a13d 100644
--- a/packages/web/src/dotlottie.ts
+++ b/packages/web/src/dotlottie.ts
@@ -432,5 +432,15 @@ export class DotLottie {
WasmLoader.setWasmUrl(url);
}
+ /**
+ * Destroys the DotLottie instance.
+ *
+ */
+ public destroy(): void {
+ this._eventManager.removeAllEventListeners();
+ this._context = null;
+ this._renderer = null;
+ }
+
// #endregion
}
diff --git a/packages/web/src/event-manager.ts b/packages/web/src/event-manager.ts
index 9c0316a8..e59c5248 100644
--- a/packages/web/src/event-manager.ts
+++ b/packages/web/src/event-manager.ts
@@ -152,4 +152,8 @@ export class EventManager {
listeners?.forEach((listener) => listener(event));
}
+
+ public removeAllEventListeners(): void {
+ this._eventListeners.clear();
+ }
}