diff --git a/apps/dotlottie-web-example/src/main.ts b/apps/dotlottie-web-example/src/main.ts
index 2b80924d..f582ca73 100644
--- a/apps/dotlottie-web-example/src/main.ts
+++ b/apps/dotlottie-web-example/src/main.ts
@@ -45,6 +45,11 @@ app.innerHTML = `
+
+
+
+
+
@@ -128,6 +133,16 @@ fetch('/hamster.lottie')
const startFrameInput = document.getElementById('startFrame') as HTMLInputElement;
const endFrameInput = document.getElementById('endFrame') as HTMLInputElement;
const setSegmentsButton = document.getElementById('setSegments') as HTMLButtonElement;
+ const freezeButton = document.getElementById('freeze') as HTMLButtonElement;
+ const unfreezeButton = document.getElementById('unfreeze') as HTMLButtonElement;
+
+ freezeButton.addEventListener('click', () => {
+ dotLottie.freeze();
+ });
+
+ unfreezeButton.addEventListener('click', () => {
+ dotLottie.unfreeze();
+ });
setSegmentsButton.addEventListener('click', () => {
const startFrame = parseInt(startFrameInput.value, 10);
diff --git a/packages/web/README.md b/packages/web/README.md
index 3b833e7f..591d3372 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -173,6 +173,8 @@ The `DotLottie` constructor accepts a config object with the following propertie
| `load(config: Config)` | Loads a new configuration or a new animation. |
| `setMode(mode: string)` | Sets the animation play mode. |
| `setSegments(startFrame: number, endFrame: number)` | Sets the start and end frame of the animation. |
+| `freeze()` | Freezes the animation by stopping the animation loop. |
+| `unfreeze()` | Unfreezes the animation by resuming the animation loop. |
### Static Methods
diff --git a/packages/web/src/dotlottie.ts b/packages/web/src/dotlottie.ts
index 22e05845..f79ff47f 100644
--- a/packages/web/src/dotlottie.ts
+++ b/packages/web/src/dotlottie.ts
@@ -832,5 +832,22 @@ export class DotLottie {
this._playbackState = 'stopped';
}
+ /**
+ * Freezes the animation by stopping the animation loop.
+ *
+ */
+ public freeze(): void {
+ this._stopAnimationLoop();
+ }
+
+ /**
+ * Unfreezes the animation by resuming the animation loop.
+ *
+ */
+ public unfreeze(): void {
+ this._synchronizeAnimationTiming(this._currentFrame);
+ this._startAnimationLoop();
+ }
+
// #endregion
}