@aarsteinmedia/dotlottie-player 6.1.1 → 6.2.0

package/CHANGELOG.md

@@ -7,6 +7,12 @@ 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
+
+### Changed
+
+- Adjusted length of animation on animateOnScroll, to fit screen height dynamically.
+
 ## [6.1.1] - 13-10-2025
 
 ### Changed

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';
@@ -1455,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) {

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';
@@ -1455,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) {

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';
@@ -1455,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) {

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';
@@ -1455,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) {