v1.0.0-dev.1

dist/types/animate.d.ts

@@ -0,0 +1,23 @@
+export class Animate {
+    advance(deltaTime: any): void;
+    value: any;
+    stop(): void;
+    isRunning: boolean;
+    fromTo(from: any, to: any, { lerp, duration, easing, onStart, onUpdate, onComplete, }: {
+        lerp?: number;
+        duration?: number;
+        easing?: (t: any) => any;
+        onStart: any;
+        onUpdate: any;
+        onComplete: any;
+    }): void;
+    from: any;
+    to: any;
+    lerp: number;
+    duration: number;
+    easing: (t: any) => any;
+    currentTime: number;
+    onStart: any;
+    onUpdate: any;
+    onComplete: any;
+}

dist/types/index.d.ts

@@ -0,0 +1,89 @@
+export default class Lenis {
+    /**
+     * @typedef {(t: number) => number} EasingFunction
+     * @typedef {'vertical' | 'horizontal'} Orientation
+     * @typedef {'vertical' | 'horizontal' | 'both'} GestureOrientation
+     *
+     * @typedef LenisOptions
+     * @property {Orientation} [direction]
+     * @property {GestureOrientation} [gestureDirection]
+     * @property {number} [mouseMultiplier]
+     * @property {boolean} [smooth]
+     *
+     * @property {Window | HTMLElement} [wrapper]
+     * @property {HTMLElement} [content]
+     * @property {boolean} [smoothWheel]
+     * @property {boolean} [smoothTouch]
+     * @property {number} [duration]
+     * @property {EasingFunction} [easing]
+     * @property {number} [lerp]
+     * @property {boolean} [infinite]
+     * @property {Orientation} [orientation]
+     * @property {GestureOrientation} [gestureOrientation]
+     * @property {number} [touchMultiplier]
+     * @property {number} [wheelMultiplier]
+     *
+     * @param {LenisOptions}
+     */
+    constructor({ direction, gestureDirection, mouseMultiplier, smooth, wrapper, content, smoothWheel, smoothTouch, duration, easing, lerp, infinite, orientation, gestureOrientation, touchMultiplier, wheelMultiplier, }?: {
+        direction?: "vertical" | "horizontal";
+        gestureDirection?: "vertical" | "horizontal" | "both";
+        mouseMultiplier?: number;
+        smooth?: boolean;
+        wrapper?: Window | HTMLElement;
+        content?: HTMLElement;
+        smoothWheel?: boolean;
+        smoothTouch?: boolean;
+        duration?: number;
+        easing?: (t: number) => number;
+        lerp?: number;
+        infinite?: boolean;
+        orientation?: "vertical" | "horizontal";
+        gestureOrientation?: "vertical" | "horizontal" | "both";
+        touchMultiplier?: number;
+        wheelMultiplier?: number;
+    });
+    set velocity(arg: any);
+    get velocity(): any;
+    set isStopped(arg: any);
+    get isStopped(): any;
+    set isSmooth(arg: any);
+    get isSmooth(): any;
+    set isScrolling(arg: any);
+    get isScrolling(): any;
+    destroy(): void;
+    on(event: any, callback: any): import("nanoevents").Unsubscribe;
+    emit(): void;
+    start(): void;
+    stop(): void;
+    raf(time: any): void;
+    scrollTo(target: any, { offset, immediate, lock, duration, easing, lerp, onComplete, }?: {
+        offset?: number;
+        immediate?: boolean;
+        lock?: boolean;
+        duration?: number;
+        easing?: (t: number) => number;
+        lerp?: number;
+        onComplete: any;
+    }, programmatic?: boolean): void;
+    get options(): {
+        wrapper: Window | HTMLElement;
+        content: HTMLElement;
+        smoothWheel: boolean;
+        smoothTouch: boolean;
+        duration: number;
+        easing: (t: number) => number;
+        lerp: number;
+        infinite: boolean;
+        gestureOrientation: "vertical" | "horizontal" | "both";
+        orientation: "vertical" | "horizontal";
+        touchMultiplier: number;
+        wheelMultiplier: number;
+    };
+    get limit(): number;
+    get isHorizontal(): boolean;
+    get scroll(): number;
+    get progress(): number;
+    get direction(): any;
+    #private;
+}

dist/types/maths.d.ts

@@ -0,0 +1,4 @@
+export function clamp(min: any, input: any, max: any): number;
+export function truncate(value: any, decimals?: number): number;
+export function lerp(start: any, end: any, amt: any): number;
+export function clampedModulo(dividend: any, divisor: any): number;

dist/types/observed-element.d.ts

@@ -0,0 +1,8 @@
+export class ObservedElement {
+    constructor(element: any);
+    element: any;
+    width: any;
+    height: any;
+    destroy(): void;
+    #private;
+}

dist/types/virtual-scroll.d.ts

@@ -0,0 +1,10 @@
+export class VirtualScroll {
+    constructor(element: any, { wheelMultiplier, touchMultiplier }: {
+        wheelMultiplier?: number;
+        touchMultiplier?: number;
+    });
+    element: any;
+    on(event: any, callback: any): import("nanoevents").Unsubscribe;
+    destroy(): void;
+    #private;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-freight/lenis",
-  "version": "0.2.28",
+  "version": "1.0.0-dev.1",
   "description": "Lenis is a smooth scroll library to normalize the scrolling experience across devices",
   "files": [
     "dist"
@@ -10,7 +10,7 @@
   "main": "dist/lenis.js",
   "umd:main": "dist/lenis.umd.js",
   "module": "dist/lenis.mjs",
-  "types": "dist/lenis.d.ts",
+  "types": "dist/types/index.d.ts",
   "exports": {
     "require": "./dist/lenis.js",
     "default": "./dist/lenis.modern.mjs"
@@ -29,6 +29,7 @@
     "vite": "^3.2.4"
   },
   "dependencies": {
+    "@theatre/core": "^0.5.1",
     "nanoevents": "^7.0.1",
     "npm-run-all": "^4.1.5",
     "tiny-emitter": "^2.1.0",
@@ -44,21 +45,18 @@
     "dev:website": "npm run dev:website --prefix ./website",
     "size": "size-limit",
     "clean": "rimraf dist && rimraf bundled",
-    "build": "npm run clean && npm run build:light && npm run build:bundle && npm run build:types",
-    "build:types": "tsc --allowJs -d --emitDeclarationOnly --declarationDir dist --removeComments ./src/lenis.js ./src/maths.js",
-    "build:light": "microbundle",
-    "build:bundle": "microbundle build -i src/lenis.js --format umd --compress --no-sourcemap --no-pkg-main --external none --output ./bundled --name Lenis",
     "build:website": "vite build",
     "prebuild": "npm run clean",
     "preversion": "npm run build",
     "postversion": "git push --follow-tags",
     "prepublishOnly": "npm run build",
     "prepare": "husky install",
-    "build:v1": "npm-run-all --parallel build:v1:dist build:v1:bundle",
-    "build:v1:dist": "microbundle build -i src/v1 --o ./src/v1/dist",
-    "build:v1:bundle": "npm-run-all build:v1:bundle-full build:v1:bundle-min",
-    "build:v1:bundle-full": "microbundle build -i src/v1 --o ./src/v1/bundled/lenis.js --no-sourcemap --no-pkg-main --external none --name 'Lenis' --format umd  --no-compress",
-    "build:v1:bundle-min": "microbundle build -i src/v1 --o ./src/v1/bundled/lenis.min.js --no-sourcemap --no-pkg-main --external none --name 'Lenis' --format umd"
+    "build": "npm-run-all --parallel build:dist build:bundle build:types",
+    "build:types": "tsc --allowJs -d --emitDeclarationOnly --declarationDir ./dist/types --removeComments ./src/index.js",
+    "build:dist": "microbundle build -i src/ --o ./dist",
+    "build:bundle": "npm-run-all build:bundle-full build:bundle-min",
+    "build:bundle-full": "microbundle build -i src/ --o ./bundled/lenis.js --no-sourcemap --no-pkg-main --external none --name 'Lenis' --format umd  --no-compress",
+    "build:bundle-min": "microbundle build -i src/ --o ./bundled/lenis.min.js --no-sourcemap --no-pkg-main --external none --name 'Lenis' --format umd"
   },
   "bugs": {
     "url": "https://github.com/studio-freight/lenis/issues"

src/v1/animate.js → src/animate.js

@@ -33,10 +33,6 @@ export class Animate {
     }
   }
 
-  // get progress() {
-  //   return this.currentTime / this.duration
-  // }
-
   stop() {
     this.isRunning = false
   }

src/v1/index.js → src/index.js

@@ -1,5 +1,5 @@
 import { createNanoEvents } from 'nanoevents'
-import { version } from '../../package.json'
+import { version } from '../package.json'
 import { Animate } from './animate'
 import { clamp, clampedModulo } from './maths'
 import { ObservedElement } from './observed-element'
@@ -15,14 +15,39 @@ export default class Lenis {
   #time
   #velocity
   #direction
-  // #scroll // current scroll value
   #animatedScroll // value used for animation
   #targetScroll // value to reach
   #isScrolling // true when scroll is animated programatically
   #isStopped // true if user should not be able to scroll - enable/disable programatically
   #isLocked // same as isStopped - enable/disable when scroll reaches target
   #isSmooth
 
+  /**
+   * @typedef {(t: number) => number} EasingFunction
+   * @typedef {'vertical' | 'horizontal'} Orientation
+   * @typedef {'vertical' | 'horizontal' | 'both'} GestureOrientation
+   *
+   * @typedef LenisOptions
+   * @property {Orientation} [direction]
+   * @property {GestureOrientation} [gestureDirection]
+   * @property {number} [mouseMultiplier]
+   * @property {boolean} [smooth]
+   *
+   * @property {Window | HTMLElement} [wrapper]
+   * @property {HTMLElement} [content]
+   * @property {boolean} [smoothWheel]
+   * @property {boolean} [smoothTouch]
+   * @property {number} [duration]
+   * @property {EasingFunction} [easing]
+   * @property {number} [lerp]
+   * @property {boolean} [infinite]
+   * @property {Orientation} [orientation]
+   * @property {GestureOrientation} [gestureOrientation]
+   * @property {number} [touchMultiplier]
+   * @property {number} [wheelMultiplier]
+   *
+   * @param {LenisOptions}
+   */
   constructor({
     //--legacy options--//
     direction,
@@ -74,7 +99,6 @@ export default class Lenis {
     this.isStopped = false
     this.isSmooth = smoothWheel || smoothTouch
     this.isScrolling = false
-    // this.#scroll =
     this.#targetScroll = this.#animatedScroll = this.#actualScroll
     this.#animate = new Animate()
     this.#emitter = createNanoEvents()
@@ -165,22 +189,10 @@ export default class Lenis {
 
   #onScroll = () => {
     if (!this.isScrolling) {
-      // const lastScroll = this.#scroll
-      // const lastScroll = this.#animatedScroll
-
-      // this.#scroll =
       this.#animatedScroll = this.#targetScroll = this.#actualScroll
-
-      // this.#velocity = this.#scroll - lastScroll
-      // this.#velocity = this.#animatedScroll - lastScroll
-      // this.velocity = this.#animatedScroll - lastScroll
-      // this.#direction = Math.sign(this.#velocity)
       this.velocity = 0
       this.emit()
     }
-    // else {
-    //   this.#scroll = this.#actualScroll
-    // }
   }
 
   start() {
@@ -260,10 +272,8 @@ export default class Lenis {
     }
 
     if (immediate) {
-      // this.#scroll = this.#animatedScroll = this.#targetScroll = target
       this.#animatedScroll = this.#targetScroll = target
       this.#setScroll(target)
-      // this.isScrolling = true
       this.emit()
       onComplete?.()
       return
@@ -283,9 +293,7 @@ export default class Lenis {
         this.isScrolling = true
       },
       onUpdate: (value) => {
-        // this.#velocity = value - this.#animatedScroll
         this.velocity = value - this.#animatedScroll
-        // this.#direction = Math.sign(this.#velocity)
 
         this.#animatedScroll = value
         this.#setScroll(value)
@@ -305,7 +313,6 @@ export default class Lenis {
           this.isScrolling = false
         })
         this.velocity = 0
-        // this.#needsEmit = true;
         this.emit()
 
         onComplete?.()

src/maths.js

@@ -2,18 +2,14 @@ export function clamp(min, input, max) {
   return Math.max(min, Math.min(input, max))
 }
 
-export function mapRange(in_min, in_max, input, out_min, out_max) {
-  return ((input - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
+export function truncate(value, decimals = 0) {
+  return parseFloat(value.toFixed(decimals))
 }
 
 export function lerp(start, end, amt) {
   return (1 - amt) * start + amt * end
 }
 
-export function truncate(value, decimals) {
-  return parseFloat(value.toFixed(decimals))
-}
-
 export function clampedModulo(dividend, divisor) {
   let remainder = dividend % divisor