@aarsteinmedia/dotlottie-player 6.2.0 → 6.2.2

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.0] - 13-10-2025
+## [6.2.2] - 11-11-2025
+
+### Changed
+
+- Adjusted length of animation on animateOnScroll
+- Added enum to `mouseout` attribute
+
+## [6.2.0] - 06-11-2025
 
 ### Changed
 

package/dist/canvas.d.ts

@@ -35,6 +35,12 @@ declare class DotLottiePlayerLight extends DotLottiePlayerBase {
     }): AnimationConfiguration<RendererType.SVG>;
 }
 
+declare enum MouseOut {
+    Pause = "pause",
+    Reverse = "reverse",
+    Stop = "stop",
+    Void = "void"
+}
 declare enum PlayerState {
     Completed = "completed",
     Destroyed = "destroyed",
@@ -148,8 +154,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get loop(): Loop;
     set mode(value: PlayMode);
     get mode(): PlayMode;
-    set mouseout(value: 'void' | 'stop' | 'pause' | 'reverse');
-    get mouseout(): "void" | "stop" | "pause" | "reverse";
+    set mouseout(value: MouseOut);
+    get mouseout(): MouseOut;
     set objectfit(value: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down');
     get objectfit(): "contain" | "cover" | "fill" | "none" | "scale-down";
     set once(value: boolean);
@@ -276,4 +282,4 @@ declare class DotLottiePlayerCanvas extends DotLottiePlayerBase {
     }): AnimationConfiguration<RendererType.Canvas>;
 }
 
-export { PlayerState, DotLottiePlayerCanvas as default, tagName };
+export { MouseOut, PlayerState, DotLottiePlayerCanvas as default, tagName };

package/dist/canvas.js

@@ -145,6 +145,13 @@ var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
     ObjectFit["ScaleDown"] = "scale-down";
     return ObjectFit;
 }({});
+var MouseOut = /*#__PURE__*/ function(MouseOut) {
+    MouseOut["Pause"] = "pause";
+    MouseOut["Reverse"] = "reverse";
+    MouseOut["Stop"] = "stop";
+    MouseOut["Void"] = "void";
+    return MouseOut;
+}({});
 var PlayerState = /*#__PURE__*/ function(PlayerState) {
     PlayerState["Completed"] = "completed";
     PlayerState["Destroyed"] = "destroyed";
@@ -496,15 +503,15 @@ const notImplemented = 'Method is not implemented';
     get mouseout() {
         const val = this.getAttribute('mouseout');
         switch(val){
-            case 'void':
-            case 'pause':
-            case 'reverse':
+            case MouseOut.Void:
+            case MouseOut.Pause:
+            case MouseOut.Reverse:
                 {
                     return val;
                 }
             default:
                 {
-                    return 'stop';
+                    return MouseOut.Stop;
                 }
         }
     }
@@ -1469,7 +1476,7 @@ 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), 1, totalFrames);
+        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
         requestAnimationFrame(()=>{
             if (currentFrame >= totalFrames) {
                 this.playerState = PlayerState.Paused;
@@ -1546,7 +1553,7 @@ const notImplemented = 'Method is not implemented';
         if (!this.hover || !this._lottieInstance || isTouch()) {
             return;
         }
-        if (this.mouseout === 'reverse') {
+        if (this.mouseout === MouseOut.Reverse) {
             this._lottieInstance.setDirection(1);
         }
         if (this.playerState === PlayerState.Completed) {
@@ -1565,16 +1572,16 @@ const notImplemented = 'Method is not implemented';
             return;
         }
         switch(this.mouseout){
-            case 'void':
+            case MouseOut.Void:
                 {
                     break;
                 }
-            case 'pause':
+            case MouseOut.Pause:
                 {
                     this.pause();
                     break;
                 }
-            case 'reverse':
+            case MouseOut.Reverse:
                 {
                     // const { direction = 1 } =
                     //   this._multiAnimationSettings.length > 0 ?
@@ -1744,4 +1751,4 @@ if (!isServer) {
     customElements.define(tagName, DotLottiePlayerCanvas);
 }
 
-export { PlayerState, DotLottiePlayerCanvas as default, tagName };
+export { MouseOut, PlayerState, DotLottiePlayerCanvas as default, tagName };

package/dist/full.d.ts

@@ -21,6 +21,12 @@ declare class DotLottiePlayerLight extends DotLottiePlayerBase {
     }): AnimationConfiguration<RendererType.SVG>;
 }
 
+declare enum MouseOut {
+    Pause = "pause",
+    Reverse = "reverse",
+    Stop = "stop",
+    Void = "void"
+}
 declare enum PlayerState {
     Completed = "completed",
     Destroyed = "destroyed",
@@ -148,8 +154,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get loop(): Loop;
     set mode(value: PlayMode);
     get mode(): PlayMode;
-    set mouseout(value: 'void' | 'stop' | 'pause' | 'reverse');
-    get mouseout(): "void" | "stop" | "pause" | "reverse";
+    set mouseout(value: MouseOut);
+    get mouseout(): MouseOut;
     set objectfit(value: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down');
     get objectfit(): "contain" | "cover" | "fill" | "none" | "scale-down";
     set once(value: boolean);
@@ -276,4 +282,4 @@ declare class DotLottiePlayer extends DotLottiePlayerBase {
     }): AnimationConfiguration<RendererType>;
 }
 
-export { PlayerState, DotLottiePlayer as default, tagName };
+export { MouseOut, PlayerState, DotLottiePlayer as default, tagName };

package/dist/full.js

@@ -145,6 +145,13 @@ var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
     ObjectFit["ScaleDown"] = "scale-down";
     return ObjectFit;
 }({});
+var MouseOut = /*#__PURE__*/ function(MouseOut) {
+    MouseOut["Pause"] = "pause";
+    MouseOut["Reverse"] = "reverse";
+    MouseOut["Stop"] = "stop";
+    MouseOut["Void"] = "void";
+    return MouseOut;
+}({});
 var PlayerState = /*#__PURE__*/ function(PlayerState) {
     PlayerState["Completed"] = "completed";
     PlayerState["Destroyed"] = "destroyed";
@@ -496,15 +503,15 @@ const notImplemented = 'Method is not implemented';
     get mouseout() {
         const val = this.getAttribute('mouseout');
         switch(val){
-            case 'void':
-            case 'pause':
-            case 'reverse':
+            case MouseOut.Void:
+            case MouseOut.Pause:
+            case MouseOut.Reverse:
                 {
                     return val;
                 }
             default:
                 {
-                    return 'stop';
+                    return MouseOut.Stop;
                 }
         }
     }
@@ -1469,7 +1476,7 @@ 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), 1, totalFrames);
+        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
         requestAnimationFrame(()=>{
             if (currentFrame >= totalFrames) {
                 this.playerState = PlayerState.Paused;
@@ -1546,7 +1553,7 @@ const notImplemented = 'Method is not implemented';
         if (!this.hover || !this._lottieInstance || isTouch()) {
             return;
         }
-        if (this.mouseout === 'reverse') {
+        if (this.mouseout === MouseOut.Reverse) {
             this._lottieInstance.setDirection(1);
         }
         if (this.playerState === PlayerState.Completed) {
@@ -1565,16 +1572,16 @@ const notImplemented = 'Method is not implemented';
             return;
         }
         switch(this.mouseout){
-            case 'void':
+            case MouseOut.Void:
                 {
                     break;
                 }
-            case 'pause':
+            case MouseOut.Pause:
                 {
                     this.pause();
                     break;
                 }
-            case 'reverse':
+            case MouseOut.Reverse:
                 {
                     // const { direction = 1 } =
                     //   this._multiAnimationSettings.length > 0 ?
@@ -1759,4 +1766,4 @@ if (!isServer) {
     customElements.define(tagName, DotLottiePlayer);
 }
 
-export { PlayerState, DotLottiePlayer as default, tagName };
+export { MouseOut, PlayerState, DotLottiePlayer as default, tagName };

package/dist/light.d.ts

@@ -21,6 +21,12 @@ declare class DotLottiePlayer extends DotLottiePlayerBase {
     }): AnimationConfiguration<RendererType>;
 }
 
+declare enum MouseOut {
+    Pause = "pause",
+    Reverse = "reverse",
+    Stop = "stop",
+    Void = "void"
+}
 declare enum PlayerState {
     Completed = "completed",
     Destroyed = "destroyed",
@@ -148,8 +154,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get loop(): Loop;
     set mode(value: PlayMode);
     get mode(): PlayMode;
-    set mouseout(value: 'void' | 'stop' | 'pause' | 'reverse');
-    get mouseout(): "void" | "stop" | "pause" | "reverse";
+    set mouseout(value: MouseOut);
+    get mouseout(): MouseOut;
     set objectfit(value: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down');
     get objectfit(): "contain" | "cover" | "fill" | "none" | "scale-down";
     set once(value: boolean);
@@ -276,4 +282,4 @@ declare class DotLottiePlayerLight extends DotLottiePlayerBase {
     }): AnimationConfiguration<RendererType.SVG>;
 }
 
-export { PlayerState, DotLottiePlayerLight as default, tagName };
+export { MouseOut, PlayerState, DotLottiePlayerLight as default, tagName };

package/dist/light.js

@@ -145,6 +145,13 @@ var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
     ObjectFit["ScaleDown"] = "scale-down";
     return ObjectFit;
 }({});
+var MouseOut = /*#__PURE__*/ function(MouseOut) {
+    MouseOut["Pause"] = "pause";
+    MouseOut["Reverse"] = "reverse";
+    MouseOut["Stop"] = "stop";
+    MouseOut["Void"] = "void";
+    return MouseOut;
+}({});
 var PlayerState = /*#__PURE__*/ function(PlayerState) {
     PlayerState["Completed"] = "completed";
     PlayerState["Destroyed"] = "destroyed";
@@ -496,15 +503,15 @@ const notImplemented = 'Method is not implemented';
     get mouseout() {
         const val = this.getAttribute('mouseout');
         switch(val){
-            case 'void':
-            case 'pause':
-            case 'reverse':
+            case MouseOut.Void:
+            case MouseOut.Pause:
+            case MouseOut.Reverse:
                 {
                     return val;
                 }
             default:
                 {
-                    return 'stop';
+                    return MouseOut.Stop;
                 }
         }
     }
@@ -1469,7 +1476,7 @@ 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), 1, totalFrames);
+        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
         requestAnimationFrame(()=>{
             if (currentFrame >= totalFrames) {
                 this.playerState = PlayerState.Paused;
@@ -1546,7 +1553,7 @@ const notImplemented = 'Method is not implemented';
         if (!this.hover || !this._lottieInstance || isTouch()) {
             return;
         }
-        if (this.mouseout === 'reverse') {
+        if (this.mouseout === MouseOut.Reverse) {
             this._lottieInstance.setDirection(1);
         }
         if (this.playerState === PlayerState.Completed) {
@@ -1565,16 +1572,16 @@ const notImplemented = 'Method is not implemented';
             return;
         }
         switch(this.mouseout){
-            case 'void':
+            case MouseOut.Void:
                 {
                     break;
                 }
-            case 'pause':
+            case MouseOut.Pause:
                 {
                     this.pause();
                     break;
                 }
-            case 'reverse':
+            case MouseOut.Reverse:
                 {
                     // const { direction = 1 } =
                     //   this._multiAnimationSettings.length > 0 ?
@@ -1743,4 +1750,4 @@ if (!isServer) {
     customElements.define(tagName, DotLottiePlayerLight);
 }
 
-export { PlayerState, DotLottiePlayerLight as default, tagName };
+export { MouseOut, PlayerState, DotLottiePlayerLight as default, tagName };

package/dist/svg.d.ts

@@ -35,6 +35,12 @@ declare class DotLottiePlayerLight extends DotLottiePlayerBase {
     }): AnimationConfiguration<RendererType.SVG>;
 }
 
+declare enum MouseOut {
+    Pause = "pause",
+    Reverse = "reverse",
+    Stop = "stop",
+    Void = "void"
+}
 declare enum PlayerState {
     Completed = "completed",
     Destroyed = "destroyed",
@@ -148,8 +154,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get loop(): Loop;
     set mode(value: PlayMode);
     get mode(): PlayMode;
-    set mouseout(value: 'void' | 'stop' | 'pause' | 'reverse');
-    get mouseout(): "void" | "stop" | "pause" | "reverse";
+    set mouseout(value: MouseOut);
+    get mouseout(): MouseOut;
     set objectfit(value: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down');
     get objectfit(): "contain" | "cover" | "fill" | "none" | "scale-down";
     set once(value: boolean);
@@ -276,4 +282,4 @@ declare class DotLottiePlayerSVG extends DotLottiePlayerBase {
     }): AnimationConfiguration<RendererType.SVG>;
 }
 
-export { PlayerState, DotLottiePlayerSVG as default, tagName };
+export { MouseOut, PlayerState, DotLottiePlayerSVG as default, tagName };

package/dist/svg.js

@@ -145,6 +145,13 @@ var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
     ObjectFit["ScaleDown"] = "scale-down";
     return ObjectFit;
 }({});
+var MouseOut = /*#__PURE__*/ function(MouseOut) {
+    MouseOut["Pause"] = "pause";
+    MouseOut["Reverse"] = "reverse";
+    MouseOut["Stop"] = "stop";
+    MouseOut["Void"] = "void";
+    return MouseOut;
+}({});
 var PlayerState = /*#__PURE__*/ function(PlayerState) {
     PlayerState["Completed"] = "completed";
     PlayerState["Destroyed"] = "destroyed";
@@ -496,15 +503,15 @@ const notImplemented = 'Method is not implemented';
     get mouseout() {
         const val = this.getAttribute('mouseout');
         switch(val){
-            case 'void':
-            case 'pause':
-            case 'reverse':
+            case MouseOut.Void:
+            case MouseOut.Pause:
+            case MouseOut.Reverse:
                 {
                     return val;
                 }
             default:
                 {
-                    return 'stop';
+                    return MouseOut.Stop;
                 }
         }
     }
@@ -1469,7 +1476,7 @@ 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), 1, totalFrames);
+        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
         requestAnimationFrame(()=>{
             if (currentFrame >= totalFrames) {
                 this.playerState = PlayerState.Paused;
@@ -1546,7 +1553,7 @@ const notImplemented = 'Method is not implemented';
         if (!this.hover || !this._lottieInstance || isTouch()) {
             return;
         }
-        if (this.mouseout === 'reverse') {
+        if (this.mouseout === MouseOut.Reverse) {
             this._lottieInstance.setDirection(1);
         }
         if (this.playerState === PlayerState.Completed) {
@@ -1565,16 +1572,16 @@ const notImplemented = 'Method is not implemented';
             return;
         }
         switch(this.mouseout){
-            case 'void':
+            case MouseOut.Void:
                 {
                     break;
                 }
-            case 'pause':
+            case MouseOut.Pause:
                 {
                     this.pause();
                     break;
                 }
-            case 'reverse':
+            case MouseOut.Reverse:
                 {
                     // const { direction = 1 } =
                     //   this._multiAnimationSettings.length > 0 ?
@@ -1743,4 +1750,4 @@ if (!isServer) {
     customElements.define(tagName, DotLottiePlayerSVG);
 }
 
-export { PlayerState, DotLottiePlayerSVG as default, tagName };
+export { MouseOut, PlayerState, DotLottiePlayerSVG as default, tagName };