lenis 1.0.44 → 1.0.45-dev.0

package/dist/lenis.js

@@ -37,323 +37,323 @@
         return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
     };
 
-    var version = "1.0.44";
+    var version = "1.0.45-dev.0";
 
-    // Clamp a value between a minimum and maximum value
-    function clamp(min, input, max) {
-      return Math.max(min, Math.min(input, max))
-    }
-
-    // Linearly interpolate between two values using an amount (0 <= t <= 1)
-    function lerp(x, y, t) {
-      return (1 - t) * x + t * y
-    }
-
-    // http://www.rorydriscoll.com/2016/03/07/frame-rate-independent-damping-using-lerp/
-    function damp(x, y, lambda, dt) {
-      return lerp(x, y, 1 - Math.exp(-lambda * dt))
-    }
-
-    // Calculate the modulo of the dividend and divisor while keeping the result within the same sign as the divisor
-    // https://anguscroll.com/just/just-modulo
-    function modulo(n, d) {
-      return ((n % d) + d) % d
+    // Clamp a value between a minimum and maximum value
+    function clamp(min, input, max) {
+      return Math.max(min, Math.min(input, max))
     }
 
-    // Animate class to handle value animations with lerping or easing
-    class Animate {
-      // Advance the animation by the given delta time
-      advance(deltaTime) {
-        if (!this.isRunning) return
-
-        let completed = false;
-
-        if (this.lerp) {
-          this.value = damp(this.value, this.to, this.lerp * 60, deltaTime);
-          if (Math.round(this.value) === this.to) {
-            this.value = this.to;
-            completed = true;
-          }
-        } else {
-          this.currentTime += deltaTime;
-          const linearProgress = clamp(0, this.currentTime / this.duration, 1);
-
-          completed = linearProgress >= 1;
-          const easedProgress = completed ? 1 : this.easing(linearProgress);
-          this.value = this.from + (this.to - this.from) * easedProgress;
-        }
-
-        // Call the onUpdate callback with the current value and completed status
-        this.onUpdate?.(this.value, completed);
-
-        if (completed) {
-          this.stop();
-        }
-      }
-
-      // Stop the animation
-      stop() {
-        this.isRunning = false;
-      }
-
-      // Set up the animation from a starting value to an ending value
-      // with optional parameters for lerping, duration, easing, and onUpdate callback
-      fromTo(
-        from,
-        to,
-        { lerp = 0.1, duration = 1, easing = (t) => t, onStart, onUpdate }
-      ) {
-        this.from = this.value = from;
-        this.to = to;
-        this.lerp = lerp;
-        this.duration = duration;
-        this.easing = easing;
-        this.currentTime = 0;
-        this.isRunning = true;
-
-        onStart?.();
-        this.onUpdate = onUpdate;
-      }
+    // Linearly interpolate between two values using an amount (0 <= t <= 1)
+    function lerp(x, y, t) {
+      return (1 - t) * x + t * y
     }
 
-    function debounce(callback, delay) {
-      let timer;
-      return function () {
-        let args = arguments;
-        let context = this;
-        clearTimeout(timer);
-        timer = setTimeout(function () {
-          callback.apply(context, args);
-        }, delay);
-      }
+    // http://www.rorydriscoll.com/2016/03/07/frame-rate-independent-damping-using-lerp/
+    function damp(x, y, lambda, dt) {
+      return lerp(x, y, 1 - Math.exp(-lambda * dt))
     }
 
-    class Dimensions {
-      constructor({
-        wrapper,
-        content,
-        autoResize = true,
-        debounce: debounceValue = 250,
-      } = {}) {
-        this.wrapper = wrapper;
-        this.content = content;
-
-        if (autoResize) {
-          this.debouncedResize = debounce(this.resize, debounceValue);
-
-          if (this.wrapper === window) {
-            window.addEventListener('resize', this.debouncedResize, false);
-          } else {
-            this.wrapperResizeObserver = new ResizeObserver(this.debouncedResize);
-            this.wrapperResizeObserver.observe(this.wrapper);
-          }
-
-          this.contentResizeObserver = new ResizeObserver(this.debouncedResize);
-          this.contentResizeObserver.observe(this.content);
-        }
-
-        this.resize();
-      }
-
-      destroy() {
-        this.wrapperResizeObserver?.disconnect();
-        this.contentResizeObserver?.disconnect();
-        window.removeEventListener('resize', this.debouncedResize, false);
-      }
-
-      resize = () => {
-        this.onWrapperResize();
-        this.onContentResize();
-      }
-
-      onWrapperResize = () => {
-        if (this.wrapper === window) {
-          this.width = window.innerWidth;
-          this.height = window.innerHeight;
-        } else {
-          this.width = this.wrapper.clientWidth;
-          this.height = this.wrapper.clientHeight;
-        }
-      }
-
-      onContentResize = () => {
-        if (this.wrapper === window) {
-          this.scrollHeight = this.content.scrollHeight;
-          this.scrollWidth = this.content.scrollWidth;
-        } else {
-          this.scrollHeight = this.wrapper.scrollHeight;
-          this.scrollWidth = this.wrapper.scrollWidth;
-        }
-      }
-
-      get limit() {
-        return {
-          x: this.scrollWidth - this.width,
-          y: this.scrollHeight - this.height,
-        }
-      }
+    // Calculate the modulo of the dividend and divisor while keeping the result within the same sign as the divisor
+    // https://anguscroll.com/just/just-modulo
+    function modulo(n, d) {
+      return ((n % d) + d) % d
     }
 
-    class Emitter {
-      constructor() {
-        this.events = {};
-      }
-
-      emit(event, ...args) {
-        let callbacks = this.events[event] || [];
-        for (let i = 0, length = callbacks.length; i < length; i++) {
-          callbacks[i](...args);
-        }
-      }
-
-      on(event, cb) {
-        // Add the callback to the event's callback list, or create a new list with the callback
-        this.events[event]?.push(cb) || (this.events[event] = [cb]);
-
-        // Return an unsubscribe function
-        return () => {
-          this.events[event] = this.events[event]?.filter((i) => cb !== i);
-        }
-      }
-
-      off(event, callback) {
-        this.events[event] = this.events[event]?.filter((i) => callback !== i);
-      }
-
-      destroy() {
-        this.events = {};
-      }
+    // Animate class to handle value animations with lerping or easing
+    class Animate {
+      // Advance the animation by the given delta time
+      advance(deltaTime) {
+        if (!this.isRunning) return
+
+        let completed = false;
+
+        if (this.lerp) {
+          this.value = damp(this.value, this.to, this.lerp * 60, deltaTime);
+          if (Math.round(this.value) === this.to) {
+            this.value = this.to;
+            completed = true;
+          }
+        } else {
+          this.currentTime += deltaTime;
+          const linearProgress = clamp(0, this.currentTime / this.duration, 1);
+
+          completed = linearProgress >= 1;
+          const easedProgress = completed ? 1 : this.easing(linearProgress);
+          this.value = this.from + (this.to - this.from) * easedProgress;
+        }
+
+        // Call the onUpdate callback with the current value and completed status
+        this.onUpdate?.(this.value, completed);
+
+        if (completed) {
+          this.stop();
+        }
+      }
+
+      // Stop the animation
+      stop() {
+        this.isRunning = false;
+      }
+
+      // Set up the animation from a starting value to an ending value
+      // with optional parameters for lerping, duration, easing, and onUpdate callback
+      fromTo(
+        from,
+        to,
+        { lerp = 0.1, duration = 1, easing = (t) => t, onStart, onUpdate }
+      ) {
+        this.from = this.value = from;
+        this.to = to;
+        this.lerp = lerp;
+        this.duration = duration;
+        this.easing = easing;
+        this.currentTime = 0;
+        this.isRunning = true;
+
+        onStart?.();
+        this.onUpdate = onUpdate;
+      }
     }
 
-    const LINE_HEIGHT = 100 / 6;
-
-    class VirtualScroll {
-      constructor(element, { wheelMultiplier = 1, touchMultiplier = 1 }) {
-        this.element = element;
-        this.wheelMultiplier = wheelMultiplier;
-        this.touchMultiplier = touchMultiplier;
-
-        this.touchStart = {
-          x: null,
-          y: null,
-        };
-
-        this.emitter = new Emitter();
-        window.addEventListener('resize', this.onWindowResize, false);
-        this.onWindowResize();
-
-        this.element.addEventListener('wheel', this.onWheel, { passive: false });
-        this.element.addEventListener('touchstart', this.onTouchStart, {
-          passive: false,
-        });
-        this.element.addEventListener('touchmove', this.onTouchMove, {
-          passive: false,
-        });
-        this.element.addEventListener('touchend', this.onTouchEnd, {
-          passive: false,
-        });
-      }
-
-      // Add an event listener for the given event and callback
-      on(event, callback) {
-        return this.emitter.on(event, callback)
-      }
-
-      // Remove all event listeners and clean up
-      destroy() {
-        this.emitter.destroy();
-
-        window.removeEventListener('resize', this.onWindowResize, false);
-
-        this.element.removeEventListener('wheel', this.onWheel, {
-          passive: false,
-        });
-        this.element.removeEventListener('touchstart', this.onTouchStart, {
-          passive: false,
-        });
-        this.element.removeEventListener('touchmove', this.onTouchMove, {
-          passive: false,
-        });
-        this.element.removeEventListener('touchend', this.onTouchEnd, {
-          passive: false,
-        });
-      }
-
-      // Event handler for 'touchstart' event
-      onTouchStart = (event) => {
-        const { clientX, clientY } = event.targetTouches
-          ? event.targetTouches[0]
-          : event;
-
-        this.touchStart.x = clientX;
-        this.touchStart.y = clientY;
-
-        this.lastDelta = {
-          x: 0,
-          y: 0,
-        };
-
-        this.emitter.emit('scroll', {
-          deltaX: 0,
-          deltaY: 0,
-          event,
-        });
-      }
-
-      // Event handler for 'touchmove' event
-      onTouchMove = (event) => {
-        const { clientX, clientY } = event.targetTouches
-          ? event.targetTouches[0]
-          : event;
-
-        const deltaX = -(clientX - this.touchStart.x) * this.touchMultiplier;
-        const deltaY = -(clientY - this.touchStart.y) * this.touchMultiplier;
-
-        this.touchStart.x = clientX;
-        this.touchStart.y = clientY;
-
-        this.lastDelta = {
-          x: deltaX,
-          y: deltaY,
-        };
-
-        this.emitter.emit('scroll', {
-          deltaX,
-          deltaY,
-          event,
-        });
-      }
-
-      onTouchEnd = (event) => {
-        this.emitter.emit('scroll', {
-          deltaX: this.lastDelta.x,
-          deltaY: this.lastDelta.y,
-          event,
-        });
-      }
-
-      // Event handler for 'wheel' event
-      onWheel = (event) => {
-        let { deltaX, deltaY, deltaMode } = event;
-
-        const multiplierX =
-          deltaMode === 1 ? LINE_HEIGHT : deltaMode === 2 ? this.windowWidth : 1;
-        const multiplierY =
-          deltaMode === 1 ? LINE_HEIGHT : deltaMode === 2 ? this.windowHeight : 1;
-
-        deltaX *= multiplierX;
-        deltaY *= multiplierY;
-
-        deltaX *= this.wheelMultiplier;
-        deltaY *= this.wheelMultiplier;
-
-        this.emitter.emit('scroll', { deltaX, deltaY, event });
-      }
-
-      onWindowResize = () => {
-        this.windowWidth = window.innerWidth;
-        this.windowHeight = window.innerHeight;
-      }
+    function debounce(callback, delay) {
+      let timer;
+      return function () {
+        let args = arguments;
+        let context = this;
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+          callback.apply(context, args);
+        }, delay);
+      }
+    }
+
+    class Dimensions {
+      constructor({
+        wrapper,
+        content,
+        autoResize = true,
+        debounce: debounceValue = 250,
+      } = {}) {
+        this.wrapper = wrapper;
+        this.content = content;
+
+        if (autoResize) {
+          this.debouncedResize = debounce(this.resize, debounceValue);
+
+          if (this.wrapper === window) {
+            window.addEventListener('resize', this.debouncedResize, false);
+          } else {
+            this.wrapperResizeObserver = new ResizeObserver(this.debouncedResize);
+            this.wrapperResizeObserver.observe(this.wrapper);
+          }
+
+          this.contentResizeObserver = new ResizeObserver(this.debouncedResize);
+          this.contentResizeObserver.observe(this.content);
+        }
+
+        this.resize();
+      }
+
+      destroy() {
+        this.wrapperResizeObserver?.disconnect();
+        this.contentResizeObserver?.disconnect();
+        window.removeEventListener('resize', this.debouncedResize, false);
+      }
+
+      resize = () => {
+        this.onWrapperResize();
+        this.onContentResize();
+      }
+
+      onWrapperResize = () => {
+        if (this.wrapper === window) {
+          this.width = window.innerWidth;
+          this.height = window.innerHeight;
+        } else {
+          this.width = this.wrapper.clientWidth;
+          this.height = this.wrapper.clientHeight;
+        }
+      }
+
+      onContentResize = () => {
+        if (this.wrapper === window) {
+          this.scrollHeight = this.content.scrollHeight;
+          this.scrollWidth = this.content.scrollWidth;
+        } else {
+          this.scrollHeight = this.wrapper.scrollHeight;
+          this.scrollWidth = this.wrapper.scrollWidth;
+        }
+      }
+
+      get limit() {
+        return {
+          x: this.scrollWidth - this.width,
+          y: this.scrollHeight - this.height,
+        }
+      }
+    }
+
+    class Emitter {
+      constructor() {
+        this.events = {};
+      }
+
+      emit(event, ...args) {
+        let callbacks = this.events[event] || [];
+        for (let i = 0, length = callbacks.length; i < length; i++) {
+          callbacks[i](...args);
+        }
+      }
+
+      on(event, cb) {
+        // Add the callback to the event's callback list, or create a new list with the callback
+        this.events[event]?.push(cb) || (this.events[event] = [cb]);
+
+        // Return an unsubscribe function
+        return () => {
+          this.events[event] = this.events[event]?.filter((i) => cb !== i);
+        }
+      }
+
+      off(event, callback) {
+        this.events[event] = this.events[event]?.filter((i) => callback !== i);
+      }
+
+      destroy() {
+        this.events = {};
+      }
+    }
+
+    const LINE_HEIGHT = 100 / 6;
+
+    class VirtualScroll {
+      constructor(element, { wheelMultiplier = 1, touchMultiplier = 1 }) {
+        this.element = element;
+        this.wheelMultiplier = wheelMultiplier;
+        this.touchMultiplier = touchMultiplier;
+
+        this.touchStart = {
+          x: null,
+          y: null,
+        };
+
+        this.emitter = new Emitter();
+        window.addEventListener('resize', this.onWindowResize, false);
+        this.onWindowResize();
+
+        this.element.addEventListener('wheel', this.onWheel, { passive: false });
+        this.element.addEventListener('touchstart', this.onTouchStart, {
+          passive: false,
+        });
+        this.element.addEventListener('touchmove', this.onTouchMove, {
+          passive: false,
+        });
+        this.element.addEventListener('touchend', this.onTouchEnd, {
+          passive: false,
+        });
+      }
+
+      // Add an event listener for the given event and callback
+      on(event, callback) {
+        return this.emitter.on(event, callback)
+      }
+
+      // Remove all event listeners and clean up
+      destroy() {
+        this.emitter.destroy();
+
+        window.removeEventListener('resize', this.onWindowResize, false);
+
+        this.element.removeEventListener('wheel', this.onWheel, {
+          passive: false,
+        });
+        this.element.removeEventListener('touchstart', this.onTouchStart, {
+          passive: false,
+        });
+        this.element.removeEventListener('touchmove', this.onTouchMove, {
+          passive: false,
+        });
+        this.element.removeEventListener('touchend', this.onTouchEnd, {
+          passive: false,
+        });
+      }
+
+      // Event handler for 'touchstart' event
+      onTouchStart = (event) => {
+        const { clientX, clientY } = event.targetTouches
+          ? event.targetTouches[0]
+          : event;
+
+        this.touchStart.x = clientX;
+        this.touchStart.y = clientY;
+
+        this.lastDelta = {
+          x: 0,
+          y: 0,
+        };
+
+        this.emitter.emit('scroll', {
+          deltaX: 0,
+          deltaY: 0,
+          event,
+        });
+      }
+
+      // Event handler for 'touchmove' event
+      onTouchMove = (event) => {
+        const { clientX, clientY } = event.targetTouches
+          ? event.targetTouches[0]
+          : event;
+
+        const deltaX = -(clientX - this.touchStart.x) * this.touchMultiplier;
+        const deltaY = -(clientY - this.touchStart.y) * this.touchMultiplier;
+
+        this.touchStart.x = clientX;
+        this.touchStart.y = clientY;
+
+        this.lastDelta = {
+          x: deltaX,
+          y: deltaY,
+        };
+
+        this.emitter.emit('scroll', {
+          deltaX,
+          deltaY,
+          event,
+        });
+      }
+
+      onTouchEnd = (event) => {
+        this.emitter.emit('scroll', {
+          deltaX: this.lastDelta.x,
+          deltaY: this.lastDelta.y,
+          event,
+        });
+      }
+
+      // Event handler for 'wheel' event
+      onWheel = (event) => {
+        let { deltaX, deltaY, deltaMode } = event;
+
+        const multiplierX =
+          deltaMode === 1 ? LINE_HEIGHT : deltaMode === 2 ? this.windowWidth : 1;
+        const multiplierY =
+          deltaMode === 1 ? LINE_HEIGHT : deltaMode === 2 ? this.windowHeight : 1;
+
+        deltaX *= multiplierX;
+        deltaY *= multiplierY;
+
+        deltaX *= this.wheelMultiplier;
+        deltaY *= this.wheelMultiplier;
+
+        this.emitter.emit('scroll', { deltaX, deltaY, event });
+      }
+
+      onWindowResize = () => {
+        this.windowWidth = window.innerWidth;
+        this.windowHeight = window.innerHeight;
+      }
     }
 
     var Lenis = /** @class */ (function () {