Add support for scroll delay

bundled/locomotive-scroll.js

@@ -234,6 +234,31 @@
       return Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev;
     });
   }
+  /**
+   * Linear interpolation between two numbers.
+   * @param {number} start
+   * @param {number} end
+   * @param {number} amt
+   * @returns {number}
+   */
+  function lerp(start, end, amt) {
+    return (1 - amt) * start + amt * end;
+  }
+
+  function getTranslate(el) {
+    var translate = {
+      x: 0,
+      y: 0
+    };
+    var transform = el.style.transform;
+    var matches = transform.match(/translate3d\(([^)]+)\)/);
+    if (matches) {
+      var parts = matches[1].split(', ');
+      translate.x = parseFloat(parts[0]);
+      translate.y = parseFloat(parts[1]);
+    }
+    return translate;
+  }
 
   /** Constants */
   var INVIEW_CLASS = 'is-inview';
@@ -291,6 +316,7 @@
         scrollCssProgress: this.$el.dataset['scrollCssProgress'] != null,
         scrollEventProgress: (_this$$el$dataset$scr4 = this.$el.dataset['scrollEventProgress']) != null ? _this$$el$dataset$scr4 : null,
         scrollSpeed: this.$el.dataset['scrollSpeed'] != null ? parseFloat(this.$el.dataset['scrollSpeed']) : null,
+        scrollDelay: this.$el.dataset['scrollDelay'] != null ? parseFloat(this.$el.dataset['scrollDelay']) : null,
         scrollRepeat: this.$el.dataset['scrollRepeat'] != null,
         scrollCall: (_this$$el$dataset$scr5 = this.$el.dataset['scrollCall']) != null ? _this$$el$dataset$scr5 : null,
         scrollCallSelf: this.$el.dataset['scrollCallSelf'] != null,
@@ -377,7 +403,13 @@
             var _progress = mapRange(0, 1, -1, 1, this.progress);
             this.translateValue = _progress * wSize * this.attributes.scrollSpeed * -1;
           }
-          this.$el.style.transform = this.scrollOrientation === 'vertical' ? "translate3d(0, " + this.translateValue + "px, 0)" : "translate3d(" + this.translateValue + "px, 0, 0)";
+          if (this.attributes.scrollDelay) {
+            var start = getTranslate(this.$el);
+            var lerped = this.scrollOrientation == 'vertical' ? lerp(start.y, this.translateValue, this.attributes.scrollDelay) : lerp(start.x, this.translateValue, this.attributes.scrollDelay);
+            this.$el.style.transform = this.scrollOrientation === 'vertical' ? "translate3d(0, " + lerped + "px, 0)" : "translate3d(" + lerped + "px, 0, 0)";
+          } else {
+            this.$el.style.transform = this.scrollOrientation === 'vertical' ? "translate3d(0, " + this.translateValue + "px, 0)" : "translate3d(" + this.translateValue + "px, 0, 0)";
+          }
         }
       }
     }

dist/types/types.d.ts

@@ -74,6 +74,7 @@ export interface IScrollElementOptions {
 }
 export interface IScrollElementAttributes {
     scrollClass: string;
+    scrollDelay: number | null;
     scrollOffset: string;
     scrollPosition: string;
     scrollModuleProgress: boolean;

dist/types/utils/maths.d.ts

@@ -39,3 +39,11 @@ export declare function normalize(min: number, max: number, value: number): numb
  * @returns {number} - Closest number.
  */
 export declare function closestNumber(array: number[], target: number): number;
+/**
+ * Linear interpolation between two numbers.
+ * @param {number} start
+ * @param {number} end
+ * @param {number} amt
+ * @returns {number}
+ */
+export declare function lerp(start: number, end: number, amt: number): number;

dist/types/utils/translate.d.ts

@@ -0,0 +1,4 @@
+export declare function getTranslate(el: HTMLElement): {
+    x: number;
+    y: number;
+};

src/core/ScrollElement.ts

@@ -28,7 +28,8 @@ import {
     scrollCallFrom,
     scrollOrientation,
 } from '../types';
-import { clamp, closestNumber, normalize, mapRange } from '../utils/maths';
+import { clamp, closestNumber, normalize, mapRange, lerp } from '../utils/maths';
+import { getTranslate } from '../utils/translate';
 
 /** Constants */
 const INVIEW_CLASS = 'is-inview';
@@ -96,6 +97,10 @@ export default class ScrollElement {
                 this.$el.dataset['scrollSpeed'] != null
                     ? parseFloat(this.$el.dataset['scrollSpeed'])
                     : null,
+            scrollDelay:
+                this.$el.dataset['scrollDelay'] != null
+                    ? parseFloat(this.$el.dataset['scrollDelay'])
+                    : null,
             scrollRepeat: this.$el.dataset['scrollRepeat'] != null,
             scrollCall: this.$el.dataset['scrollCall'] ?? null,
             scrollCallSelf: this.$el.dataset['scrollCallSelf'] != null,
@@ -205,10 +210,24 @@ export default class ScrollElement {
                         progress * wSize * this.attributes.scrollSpeed * -1;
                 }
 
-                this.$el.style.transform =
-                    this.scrollOrientation === 'vertical'
-                        ? `translate3d(0, ${this.translateValue}px, 0)`
-                        : `translate3d(${this.translateValue}px, 0, 0)`;
+                if (this.attributes.scrollDelay) {
+                    const start = getTranslate(this.$el)
+
+                    const lerped = this.scrollOrientation == 'vertical' ?
+                        lerp(start.y, this.translateValue, this.attributes.scrollDelay) :
+                        lerp(start.x, this.translateValue, this.attributes.scrollDelay)
+
+                    this.$el.style.transform =
+                        this.scrollOrientation === 'vertical'
+                            ? `translate3d(0, ${lerped}px, 0)`
+                            : `translate3d(${lerped}px, 0, 0)`;
+                }
+                else {
+                    this.$el.style.transform =
+                        this.scrollOrientation === 'vertical'
+                            ? `translate3d(0, ${this.translateValue}px, 0)`
+                            : `translate3d(${this.translateValue}px, 0, 0)`;
+                }
             }
         }
     }

src/types.ts

@@ -189,6 +189,7 @@ export interface IScrollElementOptions {
  */
 export interface IScrollElementAttributes {
     scrollClass: string;
+    scrollDelay: number | null;
     scrollOffset: string;
     scrollPosition: string;
     scrollModuleProgress: boolean;

src/utils/maths.ts

@@ -62,3 +62,15 @@ export function closestNumber(array: number[], target: number): number {
         return Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev;
     });
 }
+
+
+/**
+ * Linear interpolation between two numbers.
+ * @param {number} start 
+ * @param {number} end 
+ * @param {number} amt 
+ * @returns {number}
+ */
+export function lerp(start: number, end: number, amt: number): number {
+    return (1 - amt) * start + amt * end;
+}

src/utils/translate.ts

@@ -0,0 +1,15 @@
+export function getTranslate(el: HTMLElement) {
+    const translate = {x: 0, y: 0};
+
+    const transform = el.style.transform  
+
+    let matches = transform.match(/translate3d\(([^)]+)\)/);
+
+    if (matches) {
+        const parts = matches[1].split(', ');
+        translate.x = parseFloat(parts[0]);
+        translate.y = parseFloat(parts[1]);
+    }
+
+    return translate;
+}