@aarsteinmedia/dotlottie-player 6.1.1 → 6.2.1

package/CHANGELOG.md

@@ -7,6 +7,18 @@ 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.1] - 11-11-2025
+
+### Changed
+
+- Added enum to `mouseout` attribute
+
+## [6.2.0] - 06-11-2025
+
+### Changed
+
+- Adjusted length of animation on animateOnScroll, to fit screen height dynamically.
+
 ## [6.1.1] - 13-10-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

@@ -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';
@@ -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;
                 }
         }
     }
@@ -1455,23 +1462,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) {
@@ -1540,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) {
@@ -1559,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 ?
@@ -1738,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

@@ -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';
@@ -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;
                 }
         }
     }
@@ -1455,23 +1462,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) {
@@ -1540,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) {
@@ -1559,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 ?
@@ -1753,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

@@ -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';
@@ -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;
                 }
         }
     }
@@ -1455,23 +1462,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) {
@@ -1540,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) {
@@ -1559,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 ?
@@ -1737,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

@@ -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/svg';
 import { convert, getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
@@ -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;
                 }
         }
     }
@@ -1455,23 +1462,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) {
@@ -1540,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) {
@@ -1559,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 ?
@@ -1737,4 +1750,4 @@ if (!isServer) {
     customElements.define(tagName, DotLottiePlayerSVG);
 }
 
-export { PlayerState, DotLottiePlayerSVG as default, tagName };
+export { MouseOut, PlayerState, DotLottiePlayerSVG as default, tagName };