@aarsteinmedia/dotlottie-player 6.2.4 → 6.3.0

package/CHANGELOG.md

@@ -7,7 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing noteable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
 
-## [6.2.4] - 11-11-2025
+## [6.3.0] - 22-02-2026
+
+### Changed
+
+- Added partial support for Lottie v2.0 folder structure.
+- Made it so that aria-label only is set if explicitly specified.
+
+## [6.2.5] - 12-11-2025
 
 ### Changed
 
@@ -348,6 +355,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 - Removed dependencies
   - `@lit`
 
+[6.3.0]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/6.3.0
 [6.0.1]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/6.0.1
 [5.3.2]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.3.2
 [5.2.4]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.2.4

package/dist/canvas.d.ts

@@ -94,6 +94,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     set subframe(value: HTMLBooleanAttribute);
     get subframe(): HTMLBooleanAttribute;
     protected _container: HTMLElement | null;
+    protected _DOMRect: DOMRect | null;
     protected _errorMessage: string;
     protected _identifier: string;
     protected _isSettingsOpen: boolean;
@@ -155,9 +156,9 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     protected _handleSeekChange({ target }: Event): void;
     protected _handleSettingsClick({ target }: Event): void;
     protected setOptions(_options: {
-        container?: HTMLElement;
+        container?: undefined | HTMLElement;
         rendererType: RendererType;
-        initialSegment?: Vector2;
+        initialSegment?: undefined | Vector2;
         hasAutoplay: boolean;
         hasLoop: boolean;
         preserveAspectRatio: PreserveAspectRatio;

package/dist/canvas.js

@@ -20,7 +20,7 @@ if (isServer) {
         if (updateOnConnected in this) {
             this[updateOnConnected] = [];
         }
-        const { observedProperties = [] } = this.constructor;
+        const { observedProperties } = this.constructor;
         const { length } = observedProperties;
         for(let i = 0; i < length; i++){
             const initialValue = this[observedProperties[i]], cachedValue = Symbol(observedProperties[i]);
@@ -252,7 +252,9 @@ const pauseIcon = /* HTML */ `
     if (!this.shadow || !this.template) {
         throw new Error('No Shadow Element or Template');
     }
-    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
+    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}" ${this.description ? /* HTML */ `
+            aria-label="${this.description}"
+          ` : ''}>${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
     this.shadow.adoptedStyleSheets = [
         await DotLottiePlayerBase.styles()
     ];
@@ -634,7 +636,7 @@ const notImplemented = 'Method is not implemented';
    * Player state.
    */ this.playerState = PlayerState.Loading, /**
    * Animation Container.
-   */ this._container = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
+   */ this._container = null, this._DOMRect = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
    * Whether settings toolbar is open.
    */ this._isSettingsOpen = false, this._playerState = {
             count: 0,
@@ -823,6 +825,9 @@ const notImplemented = 'Method is not implemented';
                 if (typeof document.hidden !== 'undefined') {
                     document.addEventListener('visibilitychange', this._onVisibilityChange);
                 }
+                if (this._container) {
+                    this._DOMRect = this._container.getBoundingClientRect();
+                }
                 // Add intersection observer for detecting component being out-of-view.
                 this._addIntersectionObserver();
                 this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
@@ -1455,7 +1460,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle scroll.
    */ _handleScroll() {
-        if (!this.animateOnScroll || !this._lottieInstance) {
+        if (!this.animateOnScroll || !this._DOMRect || !this._lottieInstance) {
             return;
         }
         if (isServer) {
@@ -1476,7 +1481,12 @@ const notImplemented = 'Method is not implemented';
         if (scrollY <= this._playerState.scrollY) {
             scrollPosition = this._playerState.scrollY - scrollY;
         }
-        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
+        const { bottom, height, top } = this._DOMRect;
+        let offset = height - bottom;
+        if (top >= innerHeight) {
+            offset = height;
+        }
+        const scrollProgress = scrollPosition / (innerHeight + offset), currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
         requestAnimationFrame(()=>{
             if (currentFrame >= totalFrames) {
                 this.playerState = PlayerState.Paused;

package/dist/full.d.ts

@@ -95,6 +95,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     set subframe(value: HTMLBooleanAttribute);
     get subframe(): HTMLBooleanAttribute;
     protected _container: HTMLElement | null;
+    protected _DOMRect: DOMRect | null;
     protected _errorMessage: string;
     protected _identifier: string;
     protected _isSettingsOpen: boolean;
@@ -156,9 +157,9 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     protected _handleSeekChange({ target }: Event): void;
     protected _handleSettingsClick({ target }: Event): void;
     protected setOptions(_options: {
-        container?: HTMLElement;
+        container?: undefined | HTMLElement;
         rendererType: RendererType;
-        initialSegment?: Vector2;
+        initialSegment?: undefined | Vector2;
         hasAutoplay: boolean;
         hasLoop: boolean;
         preserveAspectRatio: PreserveAspectRatio;
@@ -189,9 +190,9 @@ declare class DotLottiePlayer extends DotLottiePlayerBase {
     convert: typeof convert;
     loadAnimation: typeof _aarsteinmedia_lottie_web.loadAnimation;
     protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }: {
-        container?: HTMLElement;
+        container?: undefined | HTMLElement;
         rendererType: RendererType;
-        initialSegment?: Vector2;
+        initialSegment?: undefined | Vector2;
         hasAutoplay: boolean;
         hasLoop: boolean;
         preserveAspectRatio: PreserveAspectRatio;

package/dist/full.js

@@ -20,7 +20,7 @@ if (isServer) {
         if (updateOnConnected in this) {
             this[updateOnConnected] = [];
         }
-        const { observedProperties = [] } = this.constructor;
+        const { observedProperties } = this.constructor;
         const { length } = observedProperties;
         for(let i = 0; i < length; i++){
             const initialValue = this[observedProperties[i]], cachedValue = Symbol(observedProperties[i]);
@@ -252,7 +252,9 @@ const pauseIcon = /* HTML */ `
     if (!this.shadow || !this.template) {
         throw new Error('No Shadow Element or Template');
     }
-    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
+    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}" ${this.description ? /* HTML */ `
+            aria-label="${this.description}"
+          ` : ''}>${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
     this.shadow.adoptedStyleSheets = [
         await DotLottiePlayerBase.styles()
     ];
@@ -634,7 +636,7 @@ const notImplemented = 'Method is not implemented';
    * Player state.
    */ this.playerState = PlayerState.Loading, /**
    * Animation Container.
-   */ this._container = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
+   */ this._container = null, this._DOMRect = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
    * Whether settings toolbar is open.
    */ this._isSettingsOpen = false, this._playerState = {
             count: 0,
@@ -823,6 +825,9 @@ const notImplemented = 'Method is not implemented';
                 if (typeof document.hidden !== 'undefined') {
                     document.addEventListener('visibilitychange', this._onVisibilityChange);
                 }
+                if (this._container) {
+                    this._DOMRect = this._container.getBoundingClientRect();
+                }
                 // Add intersection observer for detecting component being out-of-view.
                 this._addIntersectionObserver();
                 this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
@@ -1455,7 +1460,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle scroll.
    */ _handleScroll() {
-        if (!this.animateOnScroll || !this._lottieInstance) {
+        if (!this.animateOnScroll || !this._DOMRect || !this._lottieInstance) {
             return;
         }
         if (isServer) {
@@ -1476,7 +1481,12 @@ const notImplemented = 'Method is not implemented';
         if (scrollY <= this._playerState.scrollY) {
             scrollPosition = this._playerState.scrollY - scrollY;
         }
-        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
+        const { bottom, height, top } = this._DOMRect;
+        let offset = height - bottom;
+        if (top >= innerHeight) {
+            offset = height;
+        }
+        const scrollProgress = scrollPosition / (innerHeight + offset), currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
         requestAnimationFrame(()=>{
             if (currentFrame >= totalFrames) {
                 this.playerState = PlayerState.Paused;

package/dist/light.d.ts

@@ -94,6 +94,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     set subframe(value: HTMLBooleanAttribute);
     get subframe(): HTMLBooleanAttribute;
     protected _container: HTMLElement | null;
+    protected _DOMRect: DOMRect | null;
     protected _errorMessage: string;
     protected _identifier: string;
     protected _isSettingsOpen: boolean;
@@ -155,9 +156,9 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     protected _handleSeekChange({ target }: Event): void;
     protected _handleSettingsClick({ target }: Event): void;
     protected setOptions(_options: {
-        container?: HTMLElement;
+        container?: undefined | HTMLElement;
         rendererType: RendererType;
-        initialSegment?: Vector2;
+        initialSegment?: undefined | Vector2;
         hasAutoplay: boolean;
         hasLoop: boolean;
         preserveAspectRatio: PreserveAspectRatio;

package/dist/light.js

@@ -20,7 +20,7 @@ if (isServer) {
         if (updateOnConnected in this) {
             this[updateOnConnected] = [];
         }
-        const { observedProperties = [] } = this.constructor;
+        const { observedProperties } = this.constructor;
         const { length } = observedProperties;
         for(let i = 0; i < length; i++){
             const initialValue = this[observedProperties[i]], cachedValue = Symbol(observedProperties[i]);
@@ -252,7 +252,9 @@ const pauseIcon = /* HTML */ `
     if (!this.shadow || !this.template) {
         throw new Error('No Shadow Element or Template');
     }
-    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
+    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}" ${this.description ? /* HTML */ `
+            aria-label="${this.description}"
+          ` : ''}>${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
     this.shadow.adoptedStyleSheets = [
         await DotLottiePlayerBase.styles()
     ];
@@ -634,7 +636,7 @@ const notImplemented = 'Method is not implemented';
    * Player state.
    */ this.playerState = PlayerState.Loading, /**
    * Animation Container.
-   */ this._container = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
+   */ this._container = null, this._DOMRect = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
    * Whether settings toolbar is open.
    */ this._isSettingsOpen = false, this._playerState = {
             count: 0,
@@ -823,6 +825,9 @@ const notImplemented = 'Method is not implemented';
                 if (typeof document.hidden !== 'undefined') {
                     document.addEventListener('visibilitychange', this._onVisibilityChange);
                 }
+                if (this._container) {
+                    this._DOMRect = this._container.getBoundingClientRect();
+                }
                 // Add intersection observer for detecting component being out-of-view.
                 this._addIntersectionObserver();
                 this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
@@ -1455,7 +1460,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle scroll.
    */ _handleScroll() {
-        if (!this.animateOnScroll || !this._lottieInstance) {
+        if (!this.animateOnScroll || !this._DOMRect || !this._lottieInstance) {
             return;
         }
         if (isServer) {
@@ -1476,7 +1481,12 @@ const notImplemented = 'Method is not implemented';
         if (scrollY <= this._playerState.scrollY) {
             scrollPosition = this._playerState.scrollY - scrollY;
         }
-        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
+        const { bottom, height, top } = this._DOMRect;
+        let offset = height - bottom;
+        if (top >= innerHeight) {
+            offset = height;
+        }
+        const scrollProgress = scrollPosition / (innerHeight + offset), currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
         requestAnimationFrame(()=>{
             if (currentFrame >= totalFrames) {
                 this.playerState = PlayerState.Paused;

package/dist/svg.d.ts

@@ -94,6 +94,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     set subframe(value: HTMLBooleanAttribute);
     get subframe(): HTMLBooleanAttribute;
     protected _container: HTMLElement | null;
+    protected _DOMRect: DOMRect | null;
     protected _errorMessage: string;
     protected _identifier: string;
     protected _isSettingsOpen: boolean;
@@ -155,9 +156,9 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     protected _handleSeekChange({ target }: Event): void;
     protected _handleSettingsClick({ target }: Event): void;
     protected setOptions(_options: {
-        container?: HTMLElement;
+        container?: undefined | HTMLElement;
         rendererType: RendererType;
-        initialSegment?: Vector2;
+        initialSegment?: undefined | Vector2;
         hasAutoplay: boolean;
         hasLoop: boolean;
         preserveAspectRatio: PreserveAspectRatio;
@@ -188,9 +189,9 @@ declare class DotLottiePlayerSVG extends DotLottiePlayerBase {
     get renderer(): RendererType;
     constructor();
     protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, }: {
-        container?: HTMLElement;
+        container?: undefined | HTMLElement;
         rendererType: RendererType;
-        initialSegment?: Vector2;
+        initialSegment?: undefined | Vector2;
         hasAutoplay: boolean;
         hasLoop: boolean;
         preserveAspectRatio: PreserveAspectRatio;

package/dist/svg.js

@@ -20,7 +20,7 @@ if (isServer) {
         if (updateOnConnected in this) {
             this[updateOnConnected] = [];
         }
-        const { observedProperties = [] } = this.constructor;
+        const { observedProperties } = this.constructor;
         const { length } = observedProperties;
         for(let i = 0; i < length; i++){
             const initialValue = this[observedProperties[i]], cachedValue = Symbol(observedProperties[i]);
@@ -252,7 +252,9 @@ const pauseIcon = /* HTML */ `
     if (!this.shadow || !this.template) {
         throw new Error('No Shadow Element or Template');
     }
-    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
+    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}" ${this.description ? /* HTML */ `
+            aria-label="${this.description}"
+          ` : ''}>${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
     this.shadow.adoptedStyleSheets = [
         await DotLottiePlayerBase.styles()
     ];
@@ -634,7 +636,7 @@ const notImplemented = 'Method is not implemented';
    * Player state.
    */ this.playerState = PlayerState.Loading, /**
    * Animation Container.
-   */ this._container = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
+   */ this._container = null, this._DOMRect = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
    * Whether settings toolbar is open.
    */ this._isSettingsOpen = false, this._playerState = {
             count: 0,
@@ -823,6 +825,9 @@ const notImplemented = 'Method is not implemented';
                 if (typeof document.hidden !== 'undefined') {
                     document.addEventListener('visibilitychange', this._onVisibilityChange);
                 }
+                if (this._container) {
+                    this._DOMRect = this._container.getBoundingClientRect();
+                }
                 // Add intersection observer for detecting component being out-of-view.
                 this._addIntersectionObserver();
                 this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
@@ -1455,7 +1460,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle scroll.
    */ _handleScroll() {
-        if (!this.animateOnScroll || !this._lottieInstance) {
+        if (!this.animateOnScroll || !this._DOMRect || !this._lottieInstance) {
             return;
         }
         if (isServer) {
@@ -1476,7 +1481,12 @@ const notImplemented = 'Method is not implemented';
         if (scrollY <= this._playerState.scrollY) {
             scrollPosition = this._playerState.scrollY - scrollY;
         }
-        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
+        const { bottom, height, top } = this._DOMRect;
+        let offset = height - bottom;
+        if (top >= innerHeight) {
+            offset = height;
+        }
+        const scrollProgress = scrollPosition / (innerHeight + offset), currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
         requestAnimationFrame(()=>{
             if (currentFrame >= totalFrames) {
                 this.playerState = PlayerState.Paused;