npm - lenis - Versions diffs - 1.1.14-dev.5 → 1.1.15 - Mend

lenis 1.1.14-dev.5 → 1.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md CHANGED Viewed

@@ -45,7 +45,7 @@ import Lenis from 'lenis'
 using scripts:
 ```html
-<script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js"></script>
+<script src="https://unpkg.com/lenis@1.1.15/dist/lenis.min.js"></script>
 ```
@@ -55,6 +55,20 @@ using scripts:
 ### Basic:
+```js
+// Initialize Lenis
+const lenis = new Lenis({
+  autoRaf: true,
+});
+// Listen for the scroll event and log the event data
+lenis.on('scroll', (e) => {
+  console.log(e);
+});
+```
+### Custom raf loop:
 ```js
 // Initialize Lenis
 const lenis = new Lenis();
@@ -71,11 +85,23 @@ function raf(time) {
 }
 requestAnimationFrame(raf);
 ```
 #### Recommended CSS:
+import stylesheet
+```js
+import 'lenis/dist/lenis.css'
+```
+or link the CSS file:
+```html
+<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.15/dist/lenis.css">
+```
+or add it manually:
 ```css
 html.lenis, html.lenis body {
   height: auto;
@@ -98,18 +124,6 @@ html.lenis, html.lenis body {
 }
 ```
-or link the CSS file:
-```html
-<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.13/dist/lenis.css">
-```
-or import it:
-```js
-import 'lenis/dist/lenis.css'
-```
 ### GSAP ScrollTrigger:
 ```js
 // Initialize a new Lenis instance for smooth scrolling
@@ -158,13 +172,15 @@ See documentation for [lenis/react](https://github.com/darkroomengineering/lenis
 | `gestureOrientation`     | `string`              | `vertical`                                         | The orientation of the gestures. Can be `vertical`, `horizontal` or `both`                                                                                                                                                                                                       |
 | `syncTouch`              | `boolean`             | `false`                                            | Mimic touch device scroll while allowing scroll sync (can be unstable on iOS<16)                                                                                                                                                                                                 |
 | `syncTouchLerp`          | `number`              | `0.075`                                            | Lerp applied during `syncTouch` inertia                                                                                                                                                                                                                                          |
-| `touchInertiaMultiplier` | `number`              | `35`                                               | Manage the strength of syncTouch inertia                                                                                                                                                                                                                                   |
+| `touchInertiaMultiplier` | `number`              | `35`                                               | Manage the strength of syncTouch inertia                                                                                                                                                                                                                                         |
 | `wheelMultiplier`        | `number`              | `1`                                                | The multiplier to use for mouse wheel events                                                                                                                                                                                                                                     |
 | `touchMultiplier`        | `number`              | `1`                                                | The multiplier to use for touch events                                                                                                                                                                                                                                           |
 | `infinite`               | `boolean`             | `false`                                            | Enable infinite scrolling! `syncTouch: true` is required on touch devices. ([See example](https://codepen.io/ClementRoche/pen/OJqBLod))                                                                                                                                          |
 | `autoResize`             | `boolean`             | `true`                                             | Resize instance automatically       based on `ResizeObserver`. If `false` you must resize manually using `.resize()`                                                                                                                                                             |
 | `prevent`                | `function`            | `undefined`                                        | Manually prevent scroll to be smoothed based on elements traversed by events. If `true` is returned, it will prevent the scroll to be smoothed. Example: `(node) =>  node.classList.contains('cookie-modal')`                                                                    |
 | `virtualScroll`          | `function`            | `undefined`                                        | Manually modify the events before they get consumed. If `false` is returned, the scroll will not be smoothed. Examples: `(e) => { e.deltaY /= 2 }` (to slow down vertical scroll) or `({ event }) => !event.shiftKey` (to prevent scroll to be smoothed if shift key is pressed) |
+| `overscroll`             | `boolean`             | `true`                                             | Wether or not to enable overscroll on a nested Lenis instance, similar to CSS overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)                                                                                                         |
+| `autoRaf`                | `boolean`             | `false`                                            | Wether or not to automatically run `requestAnimationFrame` loop                                                                                                                                                                                                                  |
 <br/>
@@ -297,27 +313,17 @@ prevent touch events only
 - [r3f-scroll-rig](https://github.com/14islands/r3f-scroll-rig) by [14islands](https://14islands.com/)
 - [locomotive-scroll](https://github.com/locomotivemtl/locomotive-scroll) by [Locomotive](https://locomotive.ca/)
-- [vue-lenis](https://github.com/zeokku/vue-lenis) by [ZEOKKU](https://zeokku.com/)
-- [nuxt-lenis](https://www.npmjs.com/package/nuxt-lenis) by [Milkshake Studio](https://milkshake.studio/)
 <br>
 ## Lenis in use
-- [Lunchbox](https://lunchbox.io/) by [Studio Freight](https://www.studiofreight.com/)
-- [Easol](https://easol.com/) by [Studio Freight](https://www.studiofreight.com/)
-- [Dragonfly](https://dragonfly.xyz/) by [Studio Freight](https://www.studiofreight.com/)
-- [Yuga Labs](https://yuga.com/) by [Antinomy Studio](https://antinomy.studio/)
-- [Quentin Hocde's Portfolio](https://quentinhocde.com) by [Quentin Hocde](https://twitter.com/QuentinHocde)
-- [Houses Of](https://housesof.world) by [Félix P.](https://flayks.com/) & [Shelby Kay](https://shelbykay.dev/)
-- [Shelby Kay's Portfolio](https://shelbykay.dev) by [Shelby Kay](https://shelbykay.dev/)
-- [Heights Agency Portfolio](https://www.heights.agency/) by [Francesco Michelini](https://www.francescomichelini.com/)
-- [Goodship](https://goodship.io) by [Studio Freight](https://www.studiofreight.com/)
-- [Flayks' Portfolio](https://flayks.com) by [Félix P.](https://flayks.com/) & [Shelby Kay](https://shelbykay.dev/)
-- [Matt Rothenberg's portfolio](https://mattrothenberg.com) by [Matt Rothenberg](https://twitter.com/mattrothenberg)
-- [Edoardo Lunardi's portfolio](https://www.edoardolunardi.dev/) by [Edoardo Lunardi](https://www.edoardolunardi.dev/)
 - [DeSo](https://deso.com) by [Studio Freight](https://www.studiofreight.com/)
-- [Francesco Michelini's portfolio](https://www.francescomichelini.com/projects) by [Francesco Michelini](https://www.francescomichelini.com/)
+- [Sculpting Harmony](https://gehry.getty.edu/) by [Resn](https://resn.co.nz/)
+- [Superpower](https://superpower.com/)
+- [Daylight Computer](https://daylightcomputer.com/) by [Basement Studio](https://basement.studio/)
+- [Lifeworld by Olafur Eliasson](https://lifeworld.wetransfer.com/) by Nicolas Garnier, Simon Riisnæs Dagfinrud, Lumír Španihel, Everton Guilherme, Diana Alcausin, Cristiana Sousa
 <br/>

package/dist/lenis-react.mjs CHANGED Viewed

@@ -1,7 +1,6 @@
 "use client";
 // packages/react/src/provider.tsx
-import Tempus from "@darkroom.engineering/tempus";
 import Lenis from "lenis";
 import {
   createContext,
@@ -49,15 +48,7 @@ import { jsx } from "react/jsx-runtime";
 var LenisContext = createContext(null);
 var rootLenisContextStore = new Store(null);
 var ReactLenis = forwardRef(
-  ({
-    children,
-    root = false,
-    options = {},
-    autoRaf = true,
-    rafPriority = 0,
-    className,
-    props
-  }, ref) => {
+  ({ children, root = false, options = {}, className, props }, ref) => {
     const wrapperRef = useRef(null);
     const contentRef = useRef(null);
     const [lenis, setLenis] = useState2(void 0);
@@ -84,10 +75,6 @@ var ReactLenis = forwardRef(
         setLenis(void 0);
       };
     }, [root, JSON.stringify(options)]);
-    useEffect2(() => {
-      if (!lenis || !autoRaf) return;
-      return Tempus.add((time) => lenis.raf(time), rafPriority);
-    }, [lenis, autoRaf, rafPriority]);
     const callbacksRefs = useRef([]);
     const addCallback = useCallback(
       (callback, priority) => {

package/dist/lenis-react.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../packages/react/src/provider.tsx","../packages/react/src/store.ts","../packages/react/src/use-lenis.ts"],"sourcesContent":["import Tempus from '@darkroom.engineering/tempus'\r\nimport Lenis, { type ScrollCallback } from 'lenis'\r\nimport {\r\n createContext,\r\n forwardRef,\r\n useCallback,\r\n useEffect,\r\n useImperativeHandle,\r\n useRef,\r\n useState,\r\n} from 'react'\r\nimport { Store } from './store'\r\nimport type { LenisContextValue, LenisProps, LenisRef } from './types'\r\n\r\nexport const LenisContext = createContext<LenisContextValue \| null>(null)\r\n\r\n/*\r\n The root store for the lenis context\r\n \r\n This store serves as a fallback for the context if it is not available\r\n * and allows us to use the global lenis instance above a provider\r\n /\r\nexport const rootLenisContextStore = new Store<LenisContextValue \| null>(null)\r\n\r\n/\r\n React component to setup a Lenis instance\r\n /\r\nexport const ReactLenis = forwardRef<LenisRef, LenisProps>(\r\n (\r\n {\r\n children,\r\n root = false,\r\n options = {},\r\n autoRaf = true,\r\n rafPriority = 0,\r\n className,\r\n props,\r\n }: LenisProps,\r\n ref\r\n ) => {\r\n const wrapperRef = useRef<HTMLDivElement \| null>(null)\r\n const contentRef = useRef<HTMLDivElement \| null>(null)\r\n\r\n const [lenis, setLenis] = useState<Lenis \| undefined>(undefined)\r\n\r\n // Setup ref\r\n useImperativeHandle(\r\n ref,\r\n () => ({\r\n wrapper: wrapperRef.current,\r\n content: contentRef.current,\r\n lenis,\r\n }),\r\n [lenis]\r\n )\r\n\r\n // Setup lenis instance\r\n useEffect(() => {\r\n const lenis = new Lenis({\r\n ...options,\r\n ...(!root && {\r\n wrapper: wrapperRef.current!,\r\n content: contentRef.current!,\r\n }),\r\n })\r\n\r\n setLenis(lenis)\r\n\r\n return () => {\r\n lenis.destroy()\r\n setLenis(undefined)\r\n }\r\n }, [root, JSON.stringify(options)])\r\n\r\n // Setup raf\r\n useEffect(() => {\r\n if (!lenis \|\| !autoRaf) return\r\n\r\n return Tempus.add((time: number) => lenis.raf(time), rafPriority)\r\n }, [lenis, autoRaf, rafPriority])\r\n\r\n // Handle callbacks\r\n const callbacksRefs = useRef<\r\n {\r\n callback: ScrollCallback\r\n priority: number\r\n }[]\r\n >([])\r\n\r\n const addCallback: LenisContextValue['addCallback'] = useCallback(\r\n (callback, priority) => {\r\n callbacksRefs.current.push({ callback, priority })\r\n callbacksRefs.current.sort((a, b) => a.priority - b.priority)\r\n },\r\n []\r\n )\r\n\r\n const removeCallback: LenisContextValue['removeCallback'] = useCallback(\r\n (callback) => {\r\n callbacksRefs.current = callbacksRefs.current.filter(\r\n (cb) => cb.callback !== callback\r\n )\r\n },\r\n []\r\n )\r\n\r\n // This makes sure to set the global context if the root is true\r\n useEffect(() => {\r\n if (root && lenis) {\r\n rootLenisContextStore.set({ lenis, addCallback, removeCallback })\r\n\r\n return () => rootLenisContextStore.set(null)\r\n }\r\n }, [root, lenis, addCallback, removeCallback])\r\n\r\n // Setup callback listeners\r\n useEffect(() => {\r\n if (!lenis) return\r\n\r\n const onScroll: ScrollCallback = (data) => {\r\n for (let i = 0; i < callbacksRefs.current.length; i++) {\r\n callbacksRefs.current[i]?.callback(data)\r\n }\r\n }\r\n\r\n lenis.on('scroll', onScroll)\r\n\r\n return () => {\r\n lenis.off('scroll', onScroll)\r\n }\r\n }, [lenis])\r\n\r\n return (\r\n <LenisContext.Provider\r\n value={{ lenis: lenis!, addCallback, removeCallback }}\r\n >\r\n {root ? (\r\n children\r\n ) : (\r\n <div ref={wrapperRef} className={className} {...props}>\r\n <div ref={contentRef}>{children}</div>\r\n </div>\r\n )}\r\n </LenisContext.Provider>\r\n )\r\n }\r\n)\r\n","import { useEffect, useState } from 'react'\r\n\r\ntype Listener<S> = (state: S) => void\r\n\r\nexport class Store<S> {\r\n private listeners: Listener<S>[] = []\r\n\r\n constructor(private state: S) {}\r\n\r\n set(state: S) {\r\n this.state = state\r\n\r\n for (let listener of this.listeners) {\r\n listener(this.state)\r\n }\r\n }\r\n\r\n subscribe(listener: Listener<S>) {\r\n this.listeners = [...this.listeners, listener]\r\n return () => {\r\n this.listeners = this.listeners.filter((l) => l !== listener)\r\n }\r\n }\r\n\r\n get() {\r\n return this.state\r\n }\r\n}\r\n\r\nexport function useStore<S>(store: Store<S>) {\r\n const [state, setState] = useState(store.get())\r\n\r\n useEffect(() => {\r\n return store.subscribe((state) => setState(state))\r\n }, [store])\r\n\r\n return state\r\n}\r\n","import type { ScrollCallback } from 'lenis'\r\nimport { useContext, useEffect } from 'react'\r\nimport { LenisContext, rootLenisContextStore } from './provider'\r\nimport { useStore } from './store'\r\nimport type { LenisContextValue } from './types'\r\n\r\n// Fall back to an empty object if both context and store are not available\r\nconst fallbackContext: Partial<LenisContextValue> = {}\r\n\r\n/\r\n Hook to access the Lenis instance and its methods\r\n \r\n @example <caption>Scroll callback</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...')\r\n * }\r\n \r\n if (lenis.progress === 1) {\r\n * console.log('At the end!')\r\n * }\r\n * })\r\n \r\n @example <caption>Scroll callback with dependencies</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...', someDependency)\r\n * }\r\n * }, [someDependency])\r\n * @example <caption>Scroll callback with priority</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...')\r\n * }\r\n * }, [], 1)\r\n * @example <caption>Instance access</caption>\r\n * const lenis = useLenis()\r\n \r\n handleClick() {\r\n * lenis.scrollTo(100, {\r\n * lerp: 0.1,\r\n * duration: 1,\r\n * easing: (t) => t,\r\n * onComplete: () => {\r\n * console.log('Complete!')\r\n * }\r\n * })\r\n * }\r\n */\r\nexport function useLenis(\r\n callback?: ScrollCallback,\r\n deps: any[] = [],\r\n priority = 0\r\n) {\r\n // Try to get the lenis instance from the context first\r\n const localContext = useContext(LenisContext)\r\n // Fall back to the root store if the context is not available\r\n const rootContext = useStore(rootLenisContextStore)\r\n // Fall back to the fallback context if all else fails\r\n const currentContext = localContext ?? rootContext ?? fallbackContext\r\n\r\n const { lenis, addCallback, removeCallback } = currentContext\r\n\r\n useEffect(() => {\r\n if (!callback \|\| !addCallback \|\| !removeCallback \|\| !lenis) return\r\n\r\n addCallback(callback, priority)\r\n callback(lenis)\r\n\r\n return () => {\r\n removeCallback(callback)\r\n }\r\n }, [lenis, addCallback, removeCallback, priority, ...deps])\r\n\r\n return lenis\r\n}\r\n"],"mappings":"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","names":["useEffect","useState","state","useState","useEffect","lenis","useEffect","useEffect"]}
1	+ {"version":3,"sources":["../packages/react/src/provider.tsx","../packages/react/src/store.ts","../packages/react/src/use-lenis.ts"],"sourcesContent":["import Lenis, { type ScrollCallback } from 'lenis'\r\nimport {\r\n createContext,\r\n forwardRef,\r\n useCallback,\r\n useEffect,\r\n useImperativeHandle,\r\n useRef,\r\n useState,\r\n} from 'react'\r\nimport { Store } from './store'\r\nimport type { LenisContextValue, LenisProps, LenisRef } from './types'\r\n\r\nexport const LenisContext = createContext<LenisContextValue \| null>(null)\r\n\r\n/*\r\n The root store for the lenis context\r\n \r\n This store serves as a fallback for the context if it is not available\r\n * and allows us to use the global lenis instance above a provider\r\n /\r\nexport const rootLenisContextStore = new Store<LenisContextValue \| null>(null)\r\n\r\n/\r\n React component to setup a Lenis instance\r\n /\r\nexport const ReactLenis = forwardRef<LenisRef, LenisProps>(\r\n (\r\n { children, root = false, options = {}, className, props }: LenisProps,\r\n ref\r\n ) => {\r\n const wrapperRef = useRef<HTMLDivElement \| null>(null)\r\n const contentRef = useRef<HTMLDivElement \| null>(null)\r\n\r\n const [lenis, setLenis] = useState<Lenis \| undefined>(undefined)\r\n\r\n // Setup ref\r\n useImperativeHandle(\r\n ref,\r\n () => ({\r\n wrapper: wrapperRef.current,\r\n content: contentRef.current,\r\n lenis,\r\n }),\r\n [lenis]\r\n )\r\n\r\n // Setup lenis instance\r\n useEffect(() => {\r\n const lenis = new Lenis({\r\n ...options,\r\n ...(!root && {\r\n wrapper: wrapperRef.current!,\r\n content: contentRef.current!,\r\n }),\r\n })\r\n\r\n setLenis(lenis)\r\n\r\n return () => {\r\n lenis.destroy()\r\n setLenis(undefined)\r\n }\r\n }, [root, JSON.stringify(options)])\r\n\r\n // Handle callbacks\r\n const callbacksRefs = useRef<\r\n {\r\n callback: ScrollCallback\r\n priority: number\r\n }[]\r\n >([])\r\n\r\n const addCallback: LenisContextValue['addCallback'] = useCallback(\r\n (callback, priority) => {\r\n callbacksRefs.current.push({ callback, priority })\r\n callbacksRefs.current.sort((a, b) => a.priority - b.priority)\r\n },\r\n []\r\n )\r\n\r\n const removeCallback: LenisContextValue['removeCallback'] = useCallback(\r\n (callback) => {\r\n callbacksRefs.current = callbacksRefs.current.filter(\r\n (cb) => cb.callback !== callback\r\n )\r\n },\r\n []\r\n )\r\n\r\n // This makes sure to set the global context if the root is true\r\n useEffect(() => {\r\n if (root && lenis) {\r\n rootLenisContextStore.set({ lenis, addCallback, removeCallback })\r\n\r\n return () => rootLenisContextStore.set(null)\r\n }\r\n }, [root, lenis, addCallback, removeCallback])\r\n\r\n // Setup callback listeners\r\n useEffect(() => {\r\n if (!lenis) return\r\n\r\n const onScroll: ScrollCallback = (data) => {\r\n for (let i = 0; i < callbacksRefs.current.length; i++) {\r\n callbacksRefs.current[i]?.callback(data)\r\n }\r\n }\r\n\r\n lenis.on('scroll', onScroll)\r\n\r\n return () => {\r\n lenis.off('scroll', onScroll)\r\n }\r\n }, [lenis])\r\n\r\n return (\r\n <LenisContext.Provider\r\n value={{ lenis: lenis!, addCallback, removeCallback }}\r\n >\r\n {root ? (\r\n children\r\n ) : (\r\n <div ref={wrapperRef} className={className} {...props}>\r\n <div ref={contentRef}>{children}</div>\r\n </div>\r\n )}\r\n </LenisContext.Provider>\r\n )\r\n }\r\n)\r\n","import { useEffect, useState } from 'react'\r\n\r\ntype Listener<S> = (state: S) => void\r\n\r\nexport class Store<S> {\r\n private listeners: Listener<S>[] = []\r\n\r\n constructor(private state: S) {}\r\n\r\n set(state: S) {\r\n this.state = state\r\n\r\n for (let listener of this.listeners) {\r\n listener(this.state)\r\n }\r\n }\r\n\r\n subscribe(listener: Listener<S>) {\r\n this.listeners = [...this.listeners, listener]\r\n return () => {\r\n this.listeners = this.listeners.filter((l) => l !== listener)\r\n }\r\n }\r\n\r\n get() {\r\n return this.state\r\n }\r\n}\r\n\r\nexport function useStore<S>(store: Store<S>) {\r\n const [state, setState] = useState(store.get())\r\n\r\n useEffect(() => {\r\n return store.subscribe((state) => setState(state))\r\n }, [store])\r\n\r\n return state\r\n}\r\n","import type { ScrollCallback } from 'lenis'\r\nimport { useContext, useEffect } from 'react'\r\nimport { LenisContext, rootLenisContextStore } from './provider'\r\nimport { useStore } from './store'\r\nimport type { LenisContextValue } from './types'\r\n\r\n// Fall back to an empty object if both context and store are not available\r\nconst fallbackContext: Partial<LenisContextValue> = {}\r\n\r\n/\r\n Hook to access the Lenis instance and its methods\r\n \r\n @example <caption>Scroll callback</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...')\r\n * }\r\n \r\n if (lenis.progress === 1) {\r\n * console.log('At the end!')\r\n * }\r\n * })\r\n \r\n @example <caption>Scroll callback with dependencies</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...', someDependency)\r\n * }\r\n * }, [someDependency])\r\n * @example <caption>Scroll callback with priority</caption>\r\n * useLenis((lenis) => {\r\n * if (lenis.isScrolling) {\r\n * console.log('Scrolling...')\r\n * }\r\n * }, [], 1)\r\n * @example <caption>Instance access</caption>\r\n * const lenis = useLenis()\r\n \r\n handleClick() {\r\n * lenis.scrollTo(100, {\r\n * lerp: 0.1,\r\n * duration: 1,\r\n * easing: (t) => t,\r\n * onComplete: () => {\r\n * console.log('Complete!')\r\n * }\r\n * })\r\n * }\r\n */\r\nexport function useLenis(\r\n callback?: ScrollCallback,\r\n deps: any[] = [],\r\n priority = 0\r\n) {\r\n // Try to get the lenis instance from the context first\r\n const localContext = useContext(LenisContext)\r\n // Fall back to the root store if the context is not available\r\n const rootContext = useStore(rootLenisContextStore)\r\n // Fall back to the fallback context if all else fails\r\n const currentContext = localContext ?? rootContext ?? fallbackContext\r\n\r\n const { lenis, addCallback, removeCallback } = currentContext\r\n\r\n useEffect(() => {\r\n if (!callback \|\| !addCallback \|\| !removeCallback \|\| !lenis) return\r\n\r\n addCallback(callback, priority)\r\n callback(lenis)\r\n\r\n return () => {\r\n removeCallback(callback)\r\n }\r\n }, [lenis, addCallback, removeCallback, priority, ...deps])\r\n\r\n return lenis\r\n}\r\n"],"mappings":"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","names":["useEffect","useState","state","useState","useEffect","lenis","useEffect","useEffect"]}

package/dist/lenis-vue.d.ts CHANGED Viewed

@@ -1,61 +1,43 @@
+import * as Lenis from 'lenis';
+import Lenis__default, { ScrollCallback } from 'lenis';
 import * as vue from 'vue';
 import { PropType, HTMLAttributes, Plugin } from 'vue';
-import * as lenis from 'lenis';
-import { ScrollCallback } from 'lenis';
-declare const VueLenis: vue.DefineComponent<{
+declare const VueLenis: vue.DefineComponent<vue.ExtractPropTypes<{
     root: {
         type: PropType<boolean>;
         default: boolean;
     };
-    autoRaf: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    rafPriority: {
-        type: PropType<number>;
-        default: number;
-    };
     options: {
-        type: PropType<lenis.LenisOptions | undefined>;
+        type: PropType<ConstructorParameters<typeof Lenis__default>[0]>;
         default: () => {};
     };
     props: {
         type: PropType<HTMLAttributes>;
         default: () => {};
     };
-}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     root: {
         type: PropType<boolean>;
         default: boolean;
     };
-    autoRaf: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-    rafPriority: {
-        type: PropType<number>;
-        default: number;
-    };
     options: {
-        type: PropType<lenis.LenisOptions | undefined>;
+        type: PropType<ConstructorParameters<typeof Lenis__default>[0]>;
         default: () => {};
     };
     props: {
         type: PropType<HTMLAttributes>;
         default: () => {};
     };
-}>>, {
+}>> & Readonly<{}>, {
     props: HTMLAttributes;
     root: boolean;
-    autoRaf: boolean;
-    rafPriority: number;
-    options: lenis.LenisOptions | undefined;
-}, {}>;
+    options: Lenis.LenisOptions | undefined;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const vueLenisPlugin: Plugin;
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
@@ -63,6 +45,6 @@ declare module '@vue/runtime-core' {
     }
 }
-declare function useLenis(callback?: ScrollCallback, priority?: number): vue.ComputedRef<lenis.default | undefined>;
+declare function useLenis(callback?: ScrollCallback, priority?: number): vue.ComputedRef<Lenis.default | undefined>;
 export { VueLenis as Lenis, VueLenis, vueLenisPlugin as default, useLenis };

package/dist/lenis-vue.mjs CHANGED Viewed

@@ -1,5 +1,4 @@
 // packages/vue/src/provider.ts
-import Tempus from "@darkroom.engineering/tempus";
 import Lenis from "lenis";
 import {
   defineComponent,
@@ -30,14 +29,14 @@ var VueLenis = defineComponent({
       type: Boolean,
       default: false
     },
-    autoRaf: {
-      type: Boolean,
-      default: true
-    },
-    rafPriority: {
-      type: Number,
-      default: 0
-    },
+    // autoRaf: {
+    //   type: Boolean as PropType<boolean>,
+    //   default: true,
+    // },
+    // rafPriority: {
+    //   type: Number as PropType<number>,
+    //   default: 0,
+    // },
     options: {
       type: Object,
       default: () => ({})
@@ -49,7 +48,6 @@ var VueLenis = defineComponent({
   },
   setup(props, { slots, expose }) {
     const lenisRef = shallowRef2();
-    const tempusCleanupRef = shallowRef2();
     const wrapper = ref();
     const content = ref();
     expose({
@@ -87,21 +85,6 @@ var VueLenis = defineComponent({
       },
       { deep: true }
     );
-    watch(
-      [lenisRef, () => props.autoRaf, () => props.rafPriority],
-      ([lenis, autoRaf, rafPriority]) => {
-        if (!lenis || !autoRaf) {
-          return tempusCleanupRef.value?.();
-        }
-        tempusCleanupRef.value?.();
-        if (autoRaf) {
-          tempusCleanupRef.value = Tempus.add(
-            (time) => lenis?.raf(time),
-            rafPriority
-          );
-        }
-      }
-    );
     const callbacks = reactive([]);
     function addCallback(callback, priority) {
       callbacks.push({ callback, priority });

package/dist/lenis-vue.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../packages/vue/src/provider.ts","../packages/vue/src/store.ts","../packages/vue/src/use-lenis.ts"],"sourcesContent":["import Tempus from '@darkroom.engineering/tempus'\r\nimport Lenis, { type ScrollCallback } from 'lenis'\r\nimport type {\r\n HTMLAttributes,\r\n InjectionKey,\r\n Plugin,\r\n PropType,\r\n ShallowRef,\r\n} from 'vue'\r\nimport {\r\n defineComponent,\r\n h,\r\n onBeforeUnmount,\r\n onMounted,\r\n provide,\r\n reactive,\r\n ref,\r\n shallowRef,\r\n watch,\r\n} from 'vue'\r\nimport { globalAddCallback, globalLenis, globalRemoveCallback } from './store'\r\n\r\nexport const LenisSymbol: InjectionKey<ShallowRef<Lenis \| undefined>> =\r\n Symbol('LenisContext')\r\nexport const AddCallbackSymbol: InjectionKey<\r\n (callback: any, priority: number) => void\r\n> = Symbol('AddCallback')\r\nexport const RemoveCallbackSymbol: InjectionKey<(callback: any) => void> =\r\n Symbol('RemoveCallback')\r\n\r\nexport const VueLenis = defineComponent({\r\n name: 'VueLenis',\r\n props: {\r\n root: {\r\n type: Boolean as PropType<boolean>,\r\n default: false,\r\n },\r\n autoRaf: {\r\n type: Boolean as PropType<boolean>,\r\n default: true,\r\n },\r\n rafPriority: {\r\n type: Number as PropType<number>,\r\n default: 0,\r\n },\r\n options: {\r\n type: Object as PropType<ConstructorParameters<typeof Lenis>[0]>,\r\n default: () => ({}),\r\n },\r\n props: {\r\n type: Object as PropType<HTMLAttributes>,\r\n default: () => ({}),\r\n },\r\n },\r\n setup(props, { slots, expose }) {\r\n const lenisRef = shallowRef<Lenis>()\r\n const tempusCleanupRef = shallowRef<() => void>()\r\n const wrapper = ref<HTMLDivElement>()\r\n const content = ref<HTMLDivElement>()\r\n\r\n // Setup exposed properties\r\n expose({\r\n lenis: lenisRef,\r\n wrapper,\r\n content,\r\n })\r\n\r\n // Setup the lenis instance when the component is mounted\r\n onMounted(() => {\r\n lenisRef.value = new Lenis({\r\n ...props.options,\r\n ...(!props.root\r\n ? {\r\n wrapper: wrapper.value,\r\n content: content.value,\r\n }\r\n : {}),\r\n })\r\n })\r\n\r\n // Destroy the lenis instance when the component is unmounted\r\n onBeforeUnmount(() => {\r\n lenisRef.value?.destroy()\r\n lenisRef.value = undefined\r\n })\r\n\r\n // Sync options\r\n watch(\r\n () => props.options,\r\n (options, oldOptions) => {\r\n const optionsChanged =\r\n JSON.stringify(oldOptions) !== JSON.stringify(options)\r\n\r\n // If any of the options changed, destroy the lenis instance and create a new one\r\n if (optionsChanged) {\r\n lenisRef.value?.destroy()\r\n lenisRef.value = new Lenis({\r\n ...props.options,\r\n ...(!props.root\r\n ? {\r\n wrapper: wrapper.value,\r\n content: content.value,\r\n }\r\n : {}),\r\n })\r\n }\r\n },\r\n { deep: true }\r\n )\r\n\r\n // Sync autoRaf\r\n watch(\r\n [lenisRef, () => props.autoRaf, () => props.rafPriority],\r\n ([lenis, autoRaf, rafPriority]) => {\r\n if (!lenis \|\| !autoRaf) {\r\n // If lenis is not defined or autoRaf is false, stop the raf if there is one\r\n return tempusCleanupRef.value?.()\r\n }\r\n\r\n // If either lenis, autoRaf or rafPriority changed, stop the raf if there is one and start a new one\r\n tempusCleanupRef.value?.()\r\n if (autoRaf) {\r\n tempusCleanupRef.value = Tempus.add(\r\n (time: number) => lenis?.raf(time),\r\n rafPriority\r\n )\r\n }\r\n }\r\n )\r\n\r\n const callbacks = reactive<\r\n { callback: ScrollCallback; priority: number }[]\r\n >([])\r\n\r\n function addCallback(callback: ScrollCallback, priority: number) {\r\n callbacks.push({ callback, priority })\r\n callbacks.sort((a, b) => a.priority - b.priority)\r\n }\r\n\r\n function removeCallback(callback: ScrollCallback) {\r\n callbacks.splice(\r\n callbacks.findIndex((cb) => cb.callback === callback),\r\n 1\r\n )\r\n }\r\n\r\n const onScroll: ScrollCallback = (data) => {\r\n for (let i = 0; i < callbacks.length; i++) {\r\n callbacks[i]?.callback(data)\r\n }\r\n }\r\n\r\n watch(lenisRef, (lenis) => {\r\n lenis?.on('scroll', onScroll)\r\n\r\n if (props.root) {\r\n globalLenis.value = lenis\r\n globalAddCallback.value = addCallback\r\n globalRemoveCallback.value = removeCallback\r\n }\r\n })\r\n\r\n if (!props.root) {\r\n provide(LenisSymbol, lenisRef)\r\n provide(AddCallbackSymbol, addCallback)\r\n provide(RemoveCallbackSymbol, removeCallback)\r\n }\r\n\r\n return () => {\r\n if (props.root) {\r\n return slots.default?.()\r\n } else {\r\n const combinedClassName = ['lenis', props.props?.class]\r\n .filter(Boolean)\r\n .join(' ')\r\n delete props.props?.class\r\n\r\n return h('div', { class: combinedClassName, ref: wrapper, ...props }, [\r\n h('div', { ref: content }, slots.default?.()),\r\n ])\r\n }\r\n }\r\n },\r\n})\r\n\r\nexport const vueLenisPlugin: Plugin = (app) => {\r\n app.component('vue-lenis', VueLenis)\r\n // Setup a global provide to silence top level useLenis injection warning\r\n app.provide(LenisSymbol, shallowRef(undefined))\r\n app.provide(AddCallbackSymbol, undefined as any)\r\n app.provide(RemoveCallbackSymbol, undefined as any)\r\n}\r\n\r\n// @ts-ignore\r\ndeclare module '@vue/runtime-core' {\r\n export interface GlobalComponents {\r\n 'vue-lenis': typeof VueLenis\r\n }\r\n}\r\n","import type Lenis from 'lenis'\r\nimport type { ScrollCallback } from 'lenis'\r\nimport { shallowRef } from 'vue'\r\n\r\nexport const globalLenis = shallowRef<Lenis>()\r\nexport const globalAddCallback =\r\n shallowRef<(callback: ScrollCallback, priority: number) => void>()\r\nexport const globalRemoveCallback =\r\n shallowRef<(callback: ScrollCallback) => void>()\r\n","import type { ScrollCallback } from 'lenis'\r\nimport { computed, inject, nextTick, onBeforeUnmount, watch } from 'vue'\r\nimport {\r\n AddCallbackSymbol,\r\n LenisSymbol,\r\n RemoveCallbackSymbol,\r\n} from './provider'\r\nimport { globalAddCallback, globalLenis, globalRemoveCallback } from './store'\r\n\r\nexport function useLenis(callback?: ScrollCallback, priority = 0) {\r\n const lenisInjection = inject(LenisSymbol)\r\n const addCallbackInjection = inject(AddCallbackSymbol)\r\n const removeCallbackInjection = inject(RemoveCallbackSymbol)\r\n\r\n const addCallback = computed(() =>\r\n addCallbackInjection ? addCallbackInjection : globalAddCallback.value\r\n )\r\n const removeCallback = computed(() =>\r\n removeCallbackInjection\r\n ? removeCallbackInjection\r\n : globalRemoveCallback.value\r\n )\r\n\r\n const lenis = computed(() =>\r\n lenisInjection?.value ? lenisInjection.value : globalLenis.value\r\n )\r\n\r\n // Wait two ticks to make sure the lenis instance is mounted\r\n nextTick(() => {\r\n nextTick(() => {\r\n if (!lenis.value) {\r\n throw new Error(\r\n 'No lenis instance found, either mount a root lenis instance or wrap your component in a lenis provider'\r\n )\r\n }\r\n })\r\n })\r\n\r\n watch(\r\n [lenis, addCallback, removeCallback],\r\n ([lenis, addCallback, removeCallback]) => {\r\n if (!lenis \|\| !addCallback \|\| !removeCallback \|\| !callback) return\r\n\r\n addCallback?.(callback, priority)\r\n callback?.(lenis as any)\r\n }\r\n )\r\n\r\n onBeforeUnmount(() => {\r\n if (!removeCallback.value \|\| !callback) return\r\n removeCallback.value?.(callback)\r\n })\r\n\r\n return lenis\r\n}\r\n"],"mappings":"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","names":["shallowRef","shallowRef","onBeforeUnmount","watch","watch","lenis","addCallback","removeCallback","onBeforeUnmount"]}
1	+ {"version":3,"sources":["../packages/vue/src/provider.ts","../packages/vue/src/store.ts","../packages/vue/src/use-lenis.ts"],"sourcesContent":["// import Tempus from '@darkroom.engineering/tempus'\r\nimport Lenis, { type ScrollCallback } from 'lenis'\r\nimport type {\r\n HTMLAttributes,\r\n InjectionKey,\r\n Plugin,\r\n PropType,\r\n ShallowRef,\r\n} from 'vue'\r\nimport {\r\n defineComponent,\r\n h,\r\n onBeforeUnmount,\r\n onMounted,\r\n provide,\r\n reactive,\r\n ref,\r\n shallowRef,\r\n watch,\r\n} from 'vue'\r\nimport { globalAddCallback, globalLenis, globalRemoveCallback } from './store'\r\n\r\nexport const LenisSymbol: InjectionKey<ShallowRef<Lenis \| undefined>> =\r\n Symbol('LenisContext')\r\nexport const AddCallbackSymbol: InjectionKey<\r\n (callback: any, priority: number) => void\r\n> = Symbol('AddCallback')\r\nexport const RemoveCallbackSymbol: InjectionKey<(callback: any) => void> =\r\n Symbol('RemoveCallback')\r\n\r\nexport const VueLenis = defineComponent({\r\n name: 'VueLenis',\r\n props: {\r\n root: {\r\n type: Boolean as PropType<boolean>,\r\n default: false,\r\n },\r\n // autoRaf: {\r\n // type: Boolean as PropType<boolean>,\r\n // default: true,\r\n // },\r\n // rafPriority: {\r\n // type: Number as PropType<number>,\r\n // default: 0,\r\n // },\r\n options: {\r\n type: Object as PropType<ConstructorParameters<typeof Lenis>[0]>,\r\n default: () => ({}),\r\n },\r\n props: {\r\n type: Object as PropType<HTMLAttributes>,\r\n default: () => ({}),\r\n },\r\n },\r\n setup(props, { slots, expose }) {\r\n const lenisRef = shallowRef<Lenis>()\r\n // const tempusCleanupRef = shallowRef<() => void>()\r\n const wrapper = ref<HTMLDivElement>()\r\n const content = ref<HTMLDivElement>()\r\n\r\n // Setup exposed properties\r\n expose({\r\n lenis: lenisRef,\r\n wrapper,\r\n content,\r\n })\r\n\r\n // Setup the lenis instance when the component is mounted\r\n onMounted(() => {\r\n lenisRef.value = new Lenis({\r\n ...props.options,\r\n ...(!props.root\r\n ? {\r\n wrapper: wrapper.value,\r\n content: content.value,\r\n }\r\n : {}),\r\n })\r\n })\r\n\r\n // Destroy the lenis instance when the component is unmounted\r\n onBeforeUnmount(() => {\r\n lenisRef.value?.destroy()\r\n lenisRef.value = undefined\r\n })\r\n\r\n // Sync options\r\n watch(\r\n () => props.options,\r\n (options, oldOptions) => {\r\n const optionsChanged =\r\n JSON.stringify(oldOptions) !== JSON.stringify(options)\r\n\r\n // If any of the options changed, destroy the lenis instance and create a new one\r\n if (optionsChanged) {\r\n lenisRef.value?.destroy()\r\n lenisRef.value = new Lenis({\r\n ...props.options,\r\n ...(!props.root\r\n ? {\r\n wrapper: wrapper.value,\r\n content: content.value,\r\n }\r\n : {}),\r\n })\r\n }\r\n },\r\n { deep: true }\r\n )\r\n\r\n // Sync autoRaf\r\n // watch(\r\n // [lenisRef, () => props.autoRaf, () => props.rafPriority],\r\n // ([lenis, autoRaf, rafPriority]) => {\r\n // if (!lenis \|\| !autoRaf) {\r\n // // If lenis is not defined or autoRaf is false, stop the raf if there is one\r\n // return tempusCleanupRef.value?.()\r\n // }\r\n\r\n // // If either lenis, autoRaf or rafPriority changed, stop the raf if there is one and start a new one\r\n // tempusCleanupRef.value?.()\r\n // if (autoRaf) {\r\n // tempusCleanupRef.value = Tempus.add(\r\n // (time: number) => lenis?.raf(time),\r\n // rafPriority\r\n // )\r\n // }\r\n // }\r\n // )\r\n\r\n const callbacks = reactive<\r\n { callback: ScrollCallback; priority: number }[]\r\n >([])\r\n\r\n function addCallback(callback: ScrollCallback, priority: number) {\r\n callbacks.push({ callback, priority })\r\n callbacks.sort((a, b) => a.priority - b.priority)\r\n }\r\n\r\n function removeCallback(callback: ScrollCallback) {\r\n callbacks.splice(\r\n callbacks.findIndex((cb) => cb.callback === callback),\r\n 1\r\n )\r\n }\r\n\r\n const onScroll: ScrollCallback = (data) => {\r\n for (let i = 0; i < callbacks.length; i++) {\r\n callbacks[i]?.callback(data)\r\n }\r\n }\r\n\r\n watch(lenisRef, (lenis) => {\r\n lenis?.on('scroll', onScroll)\r\n\r\n if (props.root) {\r\n globalLenis.value = lenis\r\n globalAddCallback.value = addCallback\r\n globalRemoveCallback.value = removeCallback\r\n }\r\n })\r\n\r\n if (!props.root) {\r\n provide(LenisSymbol, lenisRef)\r\n provide(AddCallbackSymbol, addCallback)\r\n provide(RemoveCallbackSymbol, removeCallback)\r\n }\r\n\r\n return () => {\r\n if (props.root) {\r\n return slots.default?.()\r\n } else {\r\n const combinedClassName = ['lenis', props.props?.class]\r\n .filter(Boolean)\r\n .join(' ')\r\n delete props.props?.class\r\n\r\n return h('div', { class: combinedClassName, ref: wrapper, ...props }, [\r\n h('div', { ref: content }, slots.default?.()),\r\n ])\r\n }\r\n }\r\n },\r\n})\r\n\r\nexport const vueLenisPlugin: Plugin = (app) => {\r\n app.component('vue-lenis', VueLenis)\r\n // Setup a global provide to silence top level useLenis injection warning\r\n app.provide(LenisSymbol, shallowRef(undefined))\r\n app.provide(AddCallbackSymbol, undefined as any)\r\n app.provide(RemoveCallbackSymbol, undefined as any)\r\n}\r\n\r\n// @ts-ignore\r\ndeclare module '@vue/runtime-core' {\r\n export interface GlobalComponents {\r\n 'vue-lenis': typeof VueLenis\r\n }\r\n}\r\n","import type Lenis from 'lenis'\r\nimport type { ScrollCallback } from 'lenis'\r\nimport { shallowRef } from 'vue'\r\n\r\nexport const globalLenis = shallowRef<Lenis>()\r\nexport const globalAddCallback =\r\n shallowRef<(callback: ScrollCallback, priority: number) => void>()\r\nexport const globalRemoveCallback =\r\n shallowRef<(callback: ScrollCallback) => void>()\r\n","import type { ScrollCallback } from 'lenis'\r\nimport { computed, inject, nextTick, onBeforeUnmount, watch } from 'vue'\r\nimport {\r\n AddCallbackSymbol,\r\n LenisSymbol,\r\n RemoveCallbackSymbol,\r\n} from './provider'\r\nimport { globalAddCallback, globalLenis, globalRemoveCallback } from './store'\r\n\r\nexport function useLenis(callback?: ScrollCallback, priority = 0) {\r\n const lenisInjection = inject(LenisSymbol)\r\n const addCallbackInjection = inject(AddCallbackSymbol)\r\n const removeCallbackInjection = inject(RemoveCallbackSymbol)\r\n\r\n const addCallback = computed(() =>\r\n addCallbackInjection ? addCallbackInjection : globalAddCallback.value\r\n )\r\n const removeCallback = computed(() =>\r\n removeCallbackInjection\r\n ? removeCallbackInjection\r\n : globalRemoveCallback.value\r\n )\r\n\r\n const lenis = computed(() =>\r\n lenisInjection?.value ? lenisInjection.value : globalLenis.value\r\n )\r\n\r\n // Wait two ticks to make sure the lenis instance is mounted\r\n nextTick(() => {\r\n nextTick(() => {\r\n if (!lenis.value) {\r\n throw new Error(\r\n 'No lenis instance found, either mount a root lenis instance or wrap your component in a lenis provider'\r\n )\r\n }\r\n })\r\n })\r\n\r\n watch(\r\n [lenis, addCallback, removeCallback],\r\n ([lenis, addCallback, removeCallback]) => {\r\n if (!lenis \|\| !addCallback \|\| !removeCallback \|\| !callback) return\r\n\r\n addCallback?.(callback, priority)\r\n callback?.(lenis as any)\r\n }\r\n )\r\n\r\n onBeforeUnmount(() => {\r\n if (!removeCallback.value \|\| !callback) return\r\n removeCallback.value?.(callback)\r\n })\r\n\r\n return lenis\r\n}\r\n"],"mappings":"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","names":["shallowRef","shallowRef","onBeforeUnmount","watch","watch","lenis","addCallback","removeCallback","onBeforeUnmount"]}

package/dist/lenis.d.ts CHANGED Viewed

@@ -17,7 +17,7 @@ declare class Dimensions {
     private debouncedResize?;
     private wrapperResizeObserver?;
     private contentResizeObserver?;
-    constructor(wrapper: HTMLElement | Window, content: HTMLElement, { autoResize, debounce: debounceValue }?: {
+    constructor(wrapper: HTMLElement | Window | Element, content: HTMLElement | Element, { autoResize, debounce: debounceValue }?: {
         autoResize?: boolean | undefined;
         debounce?: number | undefined;
     });
@@ -129,17 +129,17 @@ type LenisOptions = {
      * The element that will be used as the scroll container
      * @default window
      */
-    wrapper?: Window | HTMLElement;
+    wrapper?: Window | HTMLElement | Element;
     /**
      * The element that contains the content that will be scrolled, usually `wrapper`'s direct child
      * @default document.documentElement
      */
-    content?: HTMLElement;
+    content?: HTMLElement | Element;
     /**
      * The element that will listen to `wheel` and `touch` events
      * @default window
      */
-    eventsTarget?: Window | HTMLElement;
+    eventsTarget?: Window | HTMLElement | Element;
     /**
      * Smooth the scroll initiated by `wheel` events
      * @default true
@@ -212,10 +212,20 @@ type LenisOptions = {
      * Manually modify the events before they get consumed
      */
     virtualScroll?: (data: VirtualScrollData) => boolean;
+    /**
+     * Wether or not to enable overscroll on a nested Lenis instance, similar to CSS overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
+     * @default true
+     */
+    overscroll?: boolean;
     /**
      * If `true`, Lenis will not try to detect the size of the content and wrapper
      * @default false
      */
+    autoRaf?: boolean;
+    /**
+     * If `true`, Lenis will automatically run `requestAnimationFrame` loop
+     * @default false
+     */
     __experimental__naiveDimensions?: boolean;
 };
 declare global {
@@ -231,6 +241,7 @@ declare class Lenis {
     private _isLocked;
     private _preventNextNativeScrollEvent;
     private _resetVelocityTimeout;
+    private __rafID;
     /**
      * Whether or not the user is touching the screen
      */
@@ -281,7 +292,7 @@ declare class Lenis {
     constructor({ wrapper, content, eventsTarget, smoothWheel, syncTouch, syncTouchLerp, touchInertiaMultiplier, duration, // in seconds
     easing, lerp, infinite, orientation, // vertical, horizontal
     gestureOrientation, // vertical, horizontal, both
-    touchMultiplier, wheelMultiplier, autoResize, prevent, virtualScroll, __experimental__naiveDimensions, }?: LenisOptions);
+    touchMultiplier, wheelMultiplier, autoResize, prevent, virtualScroll, overscroll, autoRaf, __experimental__naiveDimensions, }?: LenisOptions);
     /**
      * Destroy the lenis instance, remove all event listeners and clean up the class name
      */
@@ -326,7 +337,7 @@ declare class Lenis {
      *
      * @param time The time in ms from an external clock like `requestAnimationFrame` or Tempus
      */
-    raf(time: number): void;
+    raf: (time: number) => void;
     /**
      * Scroll to a target value
      *

package/dist/lenis.js CHANGED Viewed

@@ -1,5 +1,5 @@
 // package.json
-var version = "1.1.14-dev.5";
+var version = "1.1.15";
 // packages/core/src/maths.ts
 function clamp(min, input, max) {
@@ -336,6 +336,7 @@ var Lenis = class {
   // same as isStopped but enabled/disabled when scroll reaches target
   _preventNextNativeScrollEvent = false;
   _resetVelocityTimeout = null;
+  __rafID = null;
   /**
    * Whether or not the user is touching the screen
    */
@@ -408,6 +409,8 @@ var Lenis = class {
     autoResize = true,
     prevent,
     virtualScroll,
+    overscroll = true,
+    autoRaf = false,
     __experimental__naiveDimensions = false
   } = {}) {
     window.lenisVersion = version;
@@ -433,6 +436,8 @@ var Lenis = class {
       autoResize,
       prevent,
       virtualScroll,
+      overscroll,
+      autoRaf,
       __experimental__naiveDimensions
     };
     this.dimensions = new Dimensions(wrapper, content, { autoResize });
@@ -449,6 +454,9 @@ var Lenis = class {
       wheelMultiplier
     });
     this.virtualScroll.on("scroll", this.onVirtualScroll);
+    if (this.options.autoRaf) {
+      this.__rafID = requestAnimationFrame(this.raf);
+    }
   }
   /**
    * Destroy the lenis instance, remove all event listeners and clean up the class name
@@ -468,6 +476,9 @@ var Lenis = class {
     this.virtualScroll.destroy();
     this.dimensions.destroy();
     this.cleanUpClassName();
+    if (this.__rafID) {
+      cancelAnimationFrame(this.__rafID);
+    }
   }
   on(event, callback) {
     return this.emitter.on(event, callback);
@@ -493,6 +504,7 @@ var Lenis = class {
     const { deltaX, deltaY, event } = data;
     this.emitter.emit("virtual-scroll", { deltaX, deltaY, event });
     if (event.ctrlKey) return;
+    if (event.lenisStopPropagation) return;
     const isTouch = event.type.includes("touch");
     const isWheel = event.type.includes("wheel");
     this.isTouching = event.type === "touchstart" || event.type === "touchmove";
@@ -510,8 +522,7 @@ var Lenis = class {
     composedPath = composedPath.slice(0, composedPath.indexOf(this.rootElement));
     const prevent = this.options.prevent;
     if (!!composedPath.find(
-      (node) => node instanceof HTMLElement && (typeof prevent === "function" && prevent?.(node) || node.hasAttribute?.("data-lenis-prevent") || isTouch && node.hasAttribute?.("data-lenis-prevent-touch") || isWheel && node.hasAttribute?.("data-lenis-prevent-wheel") || node.classList?.contains("lenis") && !node.classList?.contains("lenis-stopped"))
-      // nested lenis instance
+      (node) => node instanceof HTMLElement && (typeof prevent === "function" && prevent?.(node) || node.hasAttribute?.("data-lenis-prevent") || isTouch && node.hasAttribute?.("data-lenis-prevent-touch") || isWheel && node.hasAttribute?.("data-lenis-prevent-wheel"))
     ))
       return;
     if (this.isStopped || this.isLocked) {
@@ -522,15 +533,19 @@ var Lenis = class {
     if (!isSmooth) {
       this.isScrolling = "native";
       this.animate.stop();
+      event.lenisStopPropagation = true;
       return;
     }
-    event.preventDefault();
     let delta = deltaY;
     if (this.options.gestureOrientation === "both") {
       delta = Math.abs(deltaY) > Math.abs(deltaX) ? deltaY : deltaX;
     } else if (this.options.gestureOrientation === "horizontal") {
       delta = deltaX;
     }
+    if (!this.options.overscroll || this.options.infinite || this.options.wrapper !== window && (this.animatedScroll > 0 && this.animatedScroll < this.limit || this.animatedScroll === 0 && deltaY > 0 || this.animatedScroll === this.limit && deltaY < 0)) {
+      event.lenisStopPropagation = true;
+    }
+    event.preventDefault();
     const syncTouch = isTouch && this.options.syncTouch;
     const isTouchEnd = isTouch && event.type === "touchend";
     const hasTouchInertia = isTouchEnd && Math.abs(delta) > 5;
@@ -617,11 +632,14 @@ var Lenis = class {
    *
    * @param time The time in ms from an external clock like `requestAnimationFrame` or Tempus
    */
-  raf(time) {
+  raf = (time) => {
     const deltaTime = time - (this.time || time);
     this.time = time;
     this.animate.advance(deltaTime * 1e-3);
-  }
+    if (this.options.autoRaf) {
+      this.__rafID = requestAnimationFrame(this.raf);
+    }
+  };
   /**
    * Scroll to a target value
    *