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 }