@aarsteinmedia/dotlottie-player 6.1.0 → 6.2.0

package/CHANGELOG.md

@@ -7,7 +7,13 @@ 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.1.0] - 13-10-2025
+## [6.2.0] - 13-10-2025
+
+### Changed
+
+- Adjusted length of animation on animateOnScroll, to fit screen height dynamically.
+
+## [6.1.1] - 13-10-2025
 
 ### Changed
 
@@ -17,6 +23,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
   - `once` – Whether, if playOnVisible is true, to play once or anytime animation is in view
   - `playOnClick` – Whether to toggle play on click
   - `playOnVisible` – Play when visible
+  - `selector` – Play on clicked element by id attribute
 
 ## [6.0.5] - 12-09-2025
 

package/README.md

@@ -320,6 +320,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
 | `playOnClick`             | Whether to toggle play on click                                                                                               | `boolean`                                | `false`           |
 | `playOnVisible`           | Play when visible                                                                                                             | `boolean`                                | `false`           |
 | `renderer`                | Renderer to use                                                                                                               | `svg` \| `canvas` \| `html`              | `svg`             |
+| `selector`                | Play on clicked element by id attribute                                                                                       | `string`                                 | `undefined`       |
 | `speed`                   | Animation speed                                                                                                               | `number`                                 | `1`               |
 | `src` _(required)_        | URL to LottieJSON or dotLottie                                                                                                | `string`                                 | `undefined`       |
 | `subframe`                | When enabled this can help to reduce flicker on some animations, especially on Safari and iOS devices.                        | `boolean`                                | `false`           |

package/dist/canvas.d.ts

@@ -111,7 +111,7 @@ declare function renderControls(this: DotLottiePlayerBase): void;
 declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
 declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
-    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "speed", "src", "subframe"];
+    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
     isLight: boolean;
@@ -162,6 +162,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get preserveAspectRatio(): PreserveAspectRatio | null;
     set renderer(value: RendererType);
     get renderer(): RendererType;
+    set selector(value: string | null);
+    get selector(): string | null;
     set simple(value: boolean);
     get simple(): boolean;
     set speed(value: number);

package/dist/canvas.js

@@ -1,4 +1,4 @@
-import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename } from '@aarsteinmedia/lottie-web/utils';
+import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
 import Lottie from '@aarsteinmedia/lottie-web/canvas';
 import { convert, getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
@@ -323,6 +323,7 @@ const notImplemented = 'Method is not implemented';
             'mode',
             'playOnClick',
             'playOnVisible',
+            'selector',
             'speed',
             'src',
             'subframe'
@@ -572,6 +573,18 @@ const notImplemented = 'Method is not implemented';
         return RendererType.SVG;
     }
     /**
+   * Play on clicked element by id attribute, other than animation.
+   */ set selector(value) {
+        if (value) {
+            this.setAttribute('selector', value);
+            return;
+        }
+        this.removeAttribute('selector');
+    }
+    get selector() {
+        return this.getAttribute('selector');
+    }
+    /**
    * Hide advanced controls.
    */ set simple(value) {
         this.setAttribute('simple', value.toString());
@@ -760,6 +773,12 @@ const notImplemented = 'Method is not implemented';
                     }
                     break;
                 }
+            case 'selector':
+                {
+                    const selector = document.getElementById(this.selector ?? '');
+                    selector?.addEventListener('click', this._handleClick);
+                    break;
+                }
             case 'speed':
                 {
                     const val = Number(value);
@@ -868,6 +887,19 @@ const notImplemented = 'Method is not implemented';
             if (!animations || animations.some((animation)=>!isLottie(animation))) {
                 throw new Error('Broken or corrupted file');
             }
+            const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+            if (ldScript) {
+                const settings = JSON.parse(ldScript.innerHTML);
+                if (settings.selector) {
+                    this.selector = settings.selector;
+                }
+                if (settings.segment) {
+                    this.setSegment(settings.segment);
+                }
+                if (settings.multiAnimationSettings) {
+                    this.setMultiAnimationSettings(settings.multiAnimationSettings);
+                }
+            }
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
@@ -1237,7 +1269,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle click.
    */ _handleClick() {
-        if (!this.playOnClick) {
+        if (!this.playOnClick && !this.selector) {
             return;
         }
         this.togglePlay();
@@ -1423,23 +1455,29 @@ const notImplemented = 'Method is not implemented';
             console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
             return;
         }
-        if (this._playerState.visible) {
-            if (this._playerState.scrollTimeout) {
-                clearTimeout(this._playerState.scrollTimeout);
-            }
-            this._playerState.scrollTimeout = setTimeout(()=>{
-                this.playerState = PlayerState.Paused;
-            }, 400);
-            const adjustedScroll = scrollY > this._playerState.scrollY ? scrollY - this._playerState.scrollY : this._playerState.scrollY - scrollY, clampedScroll = Math.min(Math.max(adjustedScroll / 3, 1), this._lottieInstance.totalFrames * 3), roundedScroll = clampedScroll / 3;
-            requestAnimationFrame(()=>{
-                if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
-                    this.playerState = PlayerState.Playing;
-                    this._lottieInstance?.goToAndStop(roundedScroll, true);
-                } else {
-                    this.playerState = PlayerState.Paused;
-                }
-            });
+        if (!this._playerState.visible) {
+            return;
         }
+        if (this._playerState.scrollTimeout) {
+            clearTimeout(this._playerState.scrollTimeout);
+        }
+        this._playerState.scrollTimeout = setTimeout(()=>{
+            this.playerState = PlayerState.Paused;
+        }, 400);
+        const { totalFrames } = this._lottieInstance;
+        let scrollPosition = scrollY - this._playerState.scrollY;
+        if (scrollY <= this._playerState.scrollY) {
+            scrollPosition = this._playerState.scrollY - scrollY;
+        }
+        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 1, totalFrames);
+        requestAnimationFrame(()=>{
+            if (currentFrame >= totalFrames) {
+                this.playerState = PlayerState.Paused;
+                return;
+            }
+            this.playerState = PlayerState.Playing;
+            this._lottieInstance?.goToAndStop(currentFrame, true);
+        });
     }
     _handleWindowBlur({ type }) {
         if (this.dontFreezeOnBlur) {
@@ -1621,7 +1659,20 @@ const notImplemented = 'Method is not implemented';
             this._lottieInstance[method]('data_ready', this._dataReady);
             this._lottieInstance[method]('data_failed', this._dataFailed);
         }
-        if (this._container) {
+        if (this.selector) {
+            const selector = document.getElementById(this.selector);
+            if (selector) {
+                if (this.hover) {
+                    selector[method]('mouseenter', this._mouseEnter);
+                    selector[method]('mouseleave', this._mouseLeave);
+                } else {
+                    selector[method]('click', this._handleClick);
+                }
+            } else {
+                this.selector = null;
+            }
+        }
+        if (this._container && !this.selector) {
             if (this.hover) {
                 this._container[method]('mouseenter', this._mouseEnter);
                 this._container[method]('mouseleave', this._mouseLeave);

package/dist/full.d.ts

@@ -111,7 +111,7 @@ declare function renderControls(this: DotLottiePlayerBase): void;
 declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
 declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
-    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "speed", "src", "subframe"];
+    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
     isLight: boolean;
@@ -162,6 +162,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get preserveAspectRatio(): PreserveAspectRatio | null;
     set renderer(value: RendererType);
     get renderer(): RendererType;
+    set selector(value: string | null);
+    get selector(): string | null;
     set simple(value: boolean);
     get simple(): boolean;
     set speed(value: number);

package/dist/full.js

@@ -1,4 +1,4 @@
-import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename } from '@aarsteinmedia/lottie-web/utils';
+import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
 import Lottie from '@aarsteinmedia/lottie-web';
 import { convert, getAnimationData, addAnimation } from '@aarsteinmedia/lottie-web/dotlottie';
@@ -323,6 +323,7 @@ const notImplemented = 'Method is not implemented';
             'mode',
             'playOnClick',
             'playOnVisible',
+            'selector',
             'speed',
             'src',
             'subframe'
@@ -572,6 +573,18 @@ const notImplemented = 'Method is not implemented';
         return RendererType.SVG;
     }
     /**
+   * Play on clicked element by id attribute, other than animation.
+   */ set selector(value) {
+        if (value) {
+            this.setAttribute('selector', value);
+            return;
+        }
+        this.removeAttribute('selector');
+    }
+    get selector() {
+        return this.getAttribute('selector');
+    }
+    /**
    * Hide advanced controls.
    */ set simple(value) {
         this.setAttribute('simple', value.toString());
@@ -760,6 +773,12 @@ const notImplemented = 'Method is not implemented';
                     }
                     break;
                 }
+            case 'selector':
+                {
+                    const selector = document.getElementById(this.selector ?? '');
+                    selector?.addEventListener('click', this._handleClick);
+                    break;
+                }
             case 'speed':
                 {
                     const val = Number(value);
@@ -868,6 +887,19 @@ const notImplemented = 'Method is not implemented';
             if (!animations || animations.some((animation)=>!isLottie(animation))) {
                 throw new Error('Broken or corrupted file');
             }
+            const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+            if (ldScript) {
+                const settings = JSON.parse(ldScript.innerHTML);
+                if (settings.selector) {
+                    this.selector = settings.selector;
+                }
+                if (settings.segment) {
+                    this.setSegment(settings.segment);
+                }
+                if (settings.multiAnimationSettings) {
+                    this.setMultiAnimationSettings(settings.multiAnimationSettings);
+                }
+            }
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
@@ -1237,7 +1269,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle click.
    */ _handleClick() {
-        if (!this.playOnClick) {
+        if (!this.playOnClick && !this.selector) {
             return;
         }
         this.togglePlay();
@@ -1423,23 +1455,29 @@ const notImplemented = 'Method is not implemented';
             console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
             return;
         }
-        if (this._playerState.visible) {
-            if (this._playerState.scrollTimeout) {
-                clearTimeout(this._playerState.scrollTimeout);
-            }
-            this._playerState.scrollTimeout = setTimeout(()=>{
-                this.playerState = PlayerState.Paused;
-            }, 400);
-            const adjustedScroll = scrollY > this._playerState.scrollY ? scrollY - this._playerState.scrollY : this._playerState.scrollY - scrollY, clampedScroll = Math.min(Math.max(adjustedScroll / 3, 1), this._lottieInstance.totalFrames * 3), roundedScroll = clampedScroll / 3;
-            requestAnimationFrame(()=>{
-                if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
-                    this.playerState = PlayerState.Playing;
-                    this._lottieInstance?.goToAndStop(roundedScroll, true);
-                } else {
-                    this.playerState = PlayerState.Paused;
-                }
-            });
+        if (!this._playerState.visible) {
+            return;
         }
+        if (this._playerState.scrollTimeout) {
+            clearTimeout(this._playerState.scrollTimeout);
+        }
+        this._playerState.scrollTimeout = setTimeout(()=>{
+            this.playerState = PlayerState.Paused;
+        }, 400);
+        const { totalFrames } = this._lottieInstance;
+        let scrollPosition = scrollY - this._playerState.scrollY;
+        if (scrollY <= this._playerState.scrollY) {
+            scrollPosition = this._playerState.scrollY - scrollY;
+        }
+        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 1, totalFrames);
+        requestAnimationFrame(()=>{
+            if (currentFrame >= totalFrames) {
+                this.playerState = PlayerState.Paused;
+                return;
+            }
+            this.playerState = PlayerState.Playing;
+            this._lottieInstance?.goToAndStop(currentFrame, true);
+        });
     }
     _handleWindowBlur({ type }) {
         if (this.dontFreezeOnBlur) {
@@ -1621,7 +1659,20 @@ const notImplemented = 'Method is not implemented';
             this._lottieInstance[method]('data_ready', this._dataReady);
             this._lottieInstance[method]('data_failed', this._dataFailed);
         }
-        if (this._container) {
+        if (this.selector) {
+            const selector = document.getElementById(this.selector);
+            if (selector) {
+                if (this.hover) {
+                    selector[method]('mouseenter', this._mouseEnter);
+                    selector[method]('mouseleave', this._mouseLeave);
+                } else {
+                    selector[method]('click', this._handleClick);
+                }
+            } else {
+                this.selector = null;
+            }
+        }
+        if (this._container && !this.selector) {
             if (this.hover) {
                 this._container[method]('mouseenter', this._mouseEnter);
                 this._container[method]('mouseleave', this._mouseLeave);

package/dist/light.d.ts

@@ -111,7 +111,7 @@ declare function renderControls(this: DotLottiePlayerBase): void;
 declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
 declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
-    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "speed", "src", "subframe"];
+    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
     isLight: boolean;
@@ -162,6 +162,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get preserveAspectRatio(): PreserveAspectRatio | null;
     set renderer(value: RendererType);
     get renderer(): RendererType;
+    set selector(value: string | null);
+    get selector(): string | null;
     set simple(value: boolean);
     get simple(): boolean;
     set speed(value: number);

package/dist/light.js

@@ -1,4 +1,4 @@
-import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename } from '@aarsteinmedia/lottie-web/utils';
+import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
 import Lottie from '@aarsteinmedia/lottie-web/light';
 import { convert, getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
@@ -323,6 +323,7 @@ const notImplemented = 'Method is not implemented';
             'mode',
             'playOnClick',
             'playOnVisible',
+            'selector',
             'speed',
             'src',
             'subframe'
@@ -572,6 +573,18 @@ const notImplemented = 'Method is not implemented';
         return RendererType.SVG;
     }
     /**
+   * Play on clicked element by id attribute, other than animation.
+   */ set selector(value) {
+        if (value) {
+            this.setAttribute('selector', value);
+            return;
+        }
+        this.removeAttribute('selector');
+    }
+    get selector() {
+        return this.getAttribute('selector');
+    }
+    /**
    * Hide advanced controls.
    */ set simple(value) {
         this.setAttribute('simple', value.toString());
@@ -760,6 +773,12 @@ const notImplemented = 'Method is not implemented';
                     }
                     break;
                 }
+            case 'selector':
+                {
+                    const selector = document.getElementById(this.selector ?? '');
+                    selector?.addEventListener('click', this._handleClick);
+                    break;
+                }
             case 'speed':
                 {
                     const val = Number(value);
@@ -868,6 +887,19 @@ const notImplemented = 'Method is not implemented';
             if (!animations || animations.some((animation)=>!isLottie(animation))) {
                 throw new Error('Broken or corrupted file');
             }
+            const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+            if (ldScript) {
+                const settings = JSON.parse(ldScript.innerHTML);
+                if (settings.selector) {
+                    this.selector = settings.selector;
+                }
+                if (settings.segment) {
+                    this.setSegment(settings.segment);
+                }
+                if (settings.multiAnimationSettings) {
+                    this.setMultiAnimationSettings(settings.multiAnimationSettings);
+                }
+            }
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
@@ -1237,7 +1269,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle click.
    */ _handleClick() {
-        if (!this.playOnClick) {
+        if (!this.playOnClick && !this.selector) {
             return;
         }
         this.togglePlay();
@@ -1423,23 +1455,29 @@ const notImplemented = 'Method is not implemented';
             console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
             return;
         }
-        if (this._playerState.visible) {
-            if (this._playerState.scrollTimeout) {
-                clearTimeout(this._playerState.scrollTimeout);
-            }
-            this._playerState.scrollTimeout = setTimeout(()=>{
-                this.playerState = PlayerState.Paused;
-            }, 400);
-            const adjustedScroll = scrollY > this._playerState.scrollY ? scrollY - this._playerState.scrollY : this._playerState.scrollY - scrollY, clampedScroll = Math.min(Math.max(adjustedScroll / 3, 1), this._lottieInstance.totalFrames * 3), roundedScroll = clampedScroll / 3;
-            requestAnimationFrame(()=>{
-                if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
-                    this.playerState = PlayerState.Playing;
-                    this._lottieInstance?.goToAndStop(roundedScroll, true);
-                } else {
-                    this.playerState = PlayerState.Paused;
-                }
-            });
+        if (!this._playerState.visible) {
+            return;
         }
+        if (this._playerState.scrollTimeout) {
+            clearTimeout(this._playerState.scrollTimeout);
+        }
+        this._playerState.scrollTimeout = setTimeout(()=>{
+            this.playerState = PlayerState.Paused;
+        }, 400);
+        const { totalFrames } = this._lottieInstance;
+        let scrollPosition = scrollY - this._playerState.scrollY;
+        if (scrollY <= this._playerState.scrollY) {
+            scrollPosition = this._playerState.scrollY - scrollY;
+        }
+        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 1, totalFrames);
+        requestAnimationFrame(()=>{
+            if (currentFrame >= totalFrames) {
+                this.playerState = PlayerState.Paused;
+                return;
+            }
+            this.playerState = PlayerState.Playing;
+            this._lottieInstance?.goToAndStop(currentFrame, true);
+        });
     }
     _handleWindowBlur({ type }) {
         if (this.dontFreezeOnBlur) {
@@ -1621,7 +1659,20 @@ const notImplemented = 'Method is not implemented';
             this._lottieInstance[method]('data_ready', this._dataReady);
             this._lottieInstance[method]('data_failed', this._dataFailed);
         }
-        if (this._container) {
+        if (this.selector) {
+            const selector = document.getElementById(this.selector);
+            if (selector) {
+                if (this.hover) {
+                    selector[method]('mouseenter', this._mouseEnter);
+                    selector[method]('mouseleave', this._mouseLeave);
+                } else {
+                    selector[method]('click', this._handleClick);
+                }
+            } else {
+                this.selector = null;
+            }
+        }
+        if (this._container && !this.selector) {
             if (this.hover) {
                 this._container[method]('mouseenter', this._mouseEnter);
                 this._container[method]('mouseleave', this._mouseLeave);

package/dist/svg.d.ts

@@ -111,7 +111,7 @@ declare function renderControls(this: DotLottiePlayerBase): void;
 declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
 declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
-    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "speed", "src", "subframe"];
+    static get observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
     isLight: boolean;
@@ -162,6 +162,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get preserveAspectRatio(): PreserveAspectRatio | null;
     set renderer(value: RendererType);
     get renderer(): RendererType;
+    set selector(value: string | null);
+    get selector(): string | null;
     set simple(value: boolean);
     get simple(): boolean;
     set speed(value: number);