lenis 1.1.14 → 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.
- package/README.md +30 -14
- package/dist/lenis-react.mjs +1 -14
- package/dist/lenis-react.mjs.map +1 -1
- package/dist/lenis-vue.d.ts +0 -18
- package/dist/lenis-vue.mjs +8 -25
- package/dist/lenis-vue.mjs.map +1 -1
- package/dist/lenis.d.ts +9 -3
- package/dist/lenis.js +15 -3
- package/dist/lenis.js.map +1 -1
- package/dist/lenis.min.js +1 -1
- package/dist/lenis.min.js.map +1 -1
- package/dist/lenis.mjs +15 -3
- package/dist/lenis.mjs.map +1 -1
- package/package.json +1 -4
package/README.md
CHANGED
|
@@ -45,7 +45,7 @@ import Lenis from 'lenis'
|
|
|
45
45
|
using scripts:
|
|
46
46
|
|
|
47
47
|
```html
|
|
48
|
-
<script src="https://unpkg.com/lenis@1.1.
|
|
48
|
+
<script src="https://unpkg.com/lenis@1.1.15/dist/lenis.min.js"></script>
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
|
|
@@ -55,6 +55,20 @@ using scripts:
|
|
|
55
55
|
|
|
56
56
|
### Basic:
|
|
57
57
|
|
|
58
|
+
```js
|
|
59
|
+
// Initialize Lenis
|
|
60
|
+
const lenis = new Lenis({
|
|
61
|
+
autoRaf: true,
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
// Listen for the scroll event and log the event data
|
|
65
|
+
lenis.on('scroll', (e) => {
|
|
66
|
+
console.log(e);
|
|
67
|
+
});
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Custom raf loop:
|
|
71
|
+
|
|
58
72
|
```js
|
|
59
73
|
// Initialize Lenis
|
|
60
74
|
const lenis = new Lenis();
|
|
@@ -71,11 +85,23 @@ function raf(time) {
|
|
|
71
85
|
}
|
|
72
86
|
|
|
73
87
|
requestAnimationFrame(raf);
|
|
74
|
-
|
|
75
88
|
```
|
|
76
89
|
|
|
77
90
|
#### Recommended CSS:
|
|
78
91
|
|
|
92
|
+
import stylesheet
|
|
93
|
+
```js
|
|
94
|
+
import 'lenis/dist/lenis.css'
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
or link the CSS file:
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.15/dist/lenis.css">
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
or add it manually:
|
|
104
|
+
|
|
79
105
|
```css
|
|
80
106
|
html.lenis, html.lenis body {
|
|
81
107
|
height: auto;
|
|
@@ -98,18 +124,6 @@ html.lenis, html.lenis body {
|
|
|
98
124
|
}
|
|
99
125
|
```
|
|
100
126
|
|
|
101
|
-
or link the CSS file:
|
|
102
|
-
|
|
103
|
-
```html
|
|
104
|
-
<link rel="stylesheet" href="https://unpkg.com/lenis@1.1.14/dist/lenis.css">
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
or import it:
|
|
108
|
-
|
|
109
|
-
```js
|
|
110
|
-
import 'lenis/dist/lenis.css'
|
|
111
|
-
```
|
|
112
|
-
|
|
113
127
|
### GSAP ScrollTrigger:
|
|
114
128
|
```js
|
|
115
129
|
// Initialize a new Lenis instance for smooth scrolling
|
|
@@ -165,6 +179,8 @@ See documentation for [lenis/react](https://github.com/darkroomengineering/lenis
|
|
|
165
179
|
| `autoResize` | `boolean` | `true` | Resize instance automatically based on `ResizeObserver`. If `false` you must resize manually using `.resize()` |
|
|
166
180
|
| `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')` |
|
|
167
181
|
| `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) |
|
|
182
|
+
| `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) |
|
|
183
|
+
| `autoRaf` | `boolean` | `false` | Wether or not to automatically run `requestAnimationFrame` loop |
|
|
168
184
|
|
|
169
185
|
<br/>
|
|
170
186
|
|
package/dist/lenis-react.mjs
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
// packages/react/src/provider.tsx
|
|
4
|
-
import Tempus from "@darkroom.engineering/tempus";
|
|
5
4
|
import Lenis from "lenis";
|
|
6
5
|
import {
|
|
7
6
|
createContext,
|
|
@@ -49,15 +48,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
49
48
|
var LenisContext = createContext(null);
|
|
50
49
|
var rootLenisContextStore = new Store(null);
|
|
51
50
|
var ReactLenis = forwardRef(
|
|
52
|
-
({
|
|
53
|
-
children,
|
|
54
|
-
root = false,
|
|
55
|
-
options = {},
|
|
56
|
-
autoRaf = true,
|
|
57
|
-
rafPriority = 0,
|
|
58
|
-
className,
|
|
59
|
-
props
|
|
60
|
-
}, ref) => {
|
|
51
|
+
({ children, root = false, options = {}, className, props }, ref) => {
|
|
61
52
|
const wrapperRef = useRef(null);
|
|
62
53
|
const contentRef = useRef(null);
|
|
63
54
|
const [lenis, setLenis] = useState2(void 0);
|
|
@@ -84,10 +75,6 @@ var ReactLenis = forwardRef(
|
|
|
84
75
|
setLenis(void 0);
|
|
85
76
|
};
|
|
86
77
|
}, [root, JSON.stringify(options)]);
|
|
87
|
-
useEffect2(() => {
|
|
88
|
-
if (!lenis || !autoRaf) return;
|
|
89
|
-
return Tempus.add((time) => lenis.raf(time), rafPriority);
|
|
90
|
-
}, [lenis, autoRaf, rafPriority]);
|
|
91
78
|
const callbacksRefs = useRef([]);
|
|
92
79
|
const addCallback = useCallback(
|
|
93
80
|
(callback, priority) => {
|
package/dist/lenis-react.mjs.map
CHANGED
|
@@ -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
|
@@ -8,14 +8,6 @@ declare const VueLenis: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
8
8
|
type: PropType<boolean>;
|
|
9
9
|
default: boolean;
|
|
10
10
|
};
|
|
11
|
-
autoRaf: {
|
|
12
|
-
type: PropType<boolean>;
|
|
13
|
-
default: boolean;
|
|
14
|
-
};
|
|
15
|
-
rafPriority: {
|
|
16
|
-
type: PropType<number>;
|
|
17
|
-
default: number;
|
|
18
|
-
};
|
|
19
11
|
options: {
|
|
20
12
|
type: PropType<ConstructorParameters<typeof Lenis__default>[0]>;
|
|
21
13
|
default: () => {};
|
|
@@ -33,14 +25,6 @@ declare const VueLenis: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
33
25
|
type: PropType<boolean>;
|
|
34
26
|
default: boolean;
|
|
35
27
|
};
|
|
36
|
-
autoRaf: {
|
|
37
|
-
type: PropType<boolean>;
|
|
38
|
-
default: boolean;
|
|
39
|
-
};
|
|
40
|
-
rafPriority: {
|
|
41
|
-
type: PropType<number>;
|
|
42
|
-
default: number;
|
|
43
|
-
};
|
|
44
28
|
options: {
|
|
45
29
|
type: PropType<ConstructorParameters<typeof Lenis__default>[0]>;
|
|
46
30
|
default: () => {};
|
|
@@ -52,8 +36,6 @@ declare const VueLenis: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
52
36
|
}>> & Readonly<{}>, {
|
|
53
37
|
props: HTMLAttributes;
|
|
54
38
|
root: boolean;
|
|
55
|
-
autoRaf: boolean;
|
|
56
|
-
rafPriority: number;
|
|
57
39
|
options: Lenis.LenisOptions | undefined;
|
|
58
40
|
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
59
41
|
declare const vueLenisPlugin: Plugin;
|
package/dist/lenis-vue.mjs
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
// packages/vue/src/provider.ts
|
|
2
|
-
import Tempus from "@darkroom.engineering/tempus";
|
|
3
2
|
import Lenis from "lenis";
|
|
4
3
|
import {
|
|
5
4
|
defineComponent,
|
|
@@ -30,14 +29,14 @@ var VueLenis = defineComponent({
|
|
|
30
29
|
type: Boolean,
|
|
31
30
|
default: false
|
|
32
31
|
},
|
|
33
|
-
autoRaf: {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
},
|
|
37
|
-
rafPriority: {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
},
|
|
32
|
+
// autoRaf: {
|
|
33
|
+
// type: Boolean as PropType<boolean>,
|
|
34
|
+
// default: true,
|
|
35
|
+
// },
|
|
36
|
+
// rafPriority: {
|
|
37
|
+
// type: Number as PropType<number>,
|
|
38
|
+
// default: 0,
|
|
39
|
+
// },
|
|
41
40
|
options: {
|
|
42
41
|
type: Object,
|
|
43
42
|
default: () => ({})
|
|
@@ -49,7 +48,6 @@ var VueLenis = defineComponent({
|
|
|
49
48
|
},
|
|
50
49
|
setup(props, { slots, expose }) {
|
|
51
50
|
const lenisRef = shallowRef2();
|
|
52
|
-
const tempusCleanupRef = shallowRef2();
|
|
53
51
|
const wrapper = ref();
|
|
54
52
|
const content = ref();
|
|
55
53
|
expose({
|
|
@@ -87,21 +85,6 @@ var VueLenis = defineComponent({
|
|
|
87
85
|
},
|
|
88
86
|
{ deep: true }
|
|
89
87
|
);
|
|
90
|
-
watch(
|
|
91
|
-
[lenisRef, () => props.autoRaf, () => props.rafPriority],
|
|
92
|
-
([lenis, autoRaf, rafPriority]) => {
|
|
93
|
-
if (!lenis || !autoRaf) {
|
|
94
|
-
return tempusCleanupRef.value?.();
|
|
95
|
-
}
|
|
96
|
-
tempusCleanupRef.value?.();
|
|
97
|
-
if (autoRaf) {
|
|
98
|
-
tempusCleanupRef.value = Tempus.add(
|
|
99
|
-
(time) => lenis?.raf(time),
|
|
100
|
-
rafPriority
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
);
|
|
105
88
|
const callbacks = reactive([]);
|
|
106
89
|
function addCallback(callback, priority) {
|
|
107
90
|
callbacks.push({ callback, priority });
|
package/dist/lenis-vue.mjs.map
CHANGED
|
@@ -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
|
@@ -213,7 +213,7 @@ type LenisOptions = {
|
|
|
213
213
|
*/
|
|
214
214
|
virtualScroll?: (data: VirtualScrollData) => boolean;
|
|
215
215
|
/**
|
|
216
|
-
* Wether or not to enable overscroll on a nested
|
|
216
|
+
* 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)
|
|
217
217
|
* @default true
|
|
218
218
|
*/
|
|
219
219
|
overscroll?: boolean;
|
|
@@ -221,6 +221,11 @@ type LenisOptions = {
|
|
|
221
221
|
* If `true`, Lenis will not try to detect the size of the content and wrapper
|
|
222
222
|
* @default false
|
|
223
223
|
*/
|
|
224
|
+
autoRaf?: boolean;
|
|
225
|
+
/**
|
|
226
|
+
* If `true`, Lenis will automatically run `requestAnimationFrame` loop
|
|
227
|
+
* @default false
|
|
228
|
+
*/
|
|
224
229
|
__experimental__naiveDimensions?: boolean;
|
|
225
230
|
};
|
|
226
231
|
declare global {
|
|
@@ -236,6 +241,7 @@ declare class Lenis {
|
|
|
236
241
|
private _isLocked;
|
|
237
242
|
private _preventNextNativeScrollEvent;
|
|
238
243
|
private _resetVelocityTimeout;
|
|
244
|
+
private __rafID;
|
|
239
245
|
/**
|
|
240
246
|
* Whether or not the user is touching the screen
|
|
241
247
|
*/
|
|
@@ -286,7 +292,7 @@ declare class Lenis {
|
|
|
286
292
|
constructor({ wrapper, content, eventsTarget, smoothWheel, syncTouch, syncTouchLerp, touchInertiaMultiplier, duration, // in seconds
|
|
287
293
|
easing, lerp, infinite, orientation, // vertical, horizontal
|
|
288
294
|
gestureOrientation, // vertical, horizontal, both
|
|
289
|
-
touchMultiplier, wheelMultiplier, autoResize, prevent, virtualScroll, overscroll, __experimental__naiveDimensions, }?: LenisOptions);
|
|
295
|
+
touchMultiplier, wheelMultiplier, autoResize, prevent, virtualScroll, overscroll, autoRaf, __experimental__naiveDimensions, }?: LenisOptions);
|
|
290
296
|
/**
|
|
291
297
|
* Destroy the lenis instance, remove all event listeners and clean up the class name
|
|
292
298
|
*/
|
|
@@ -331,7 +337,7 @@ declare class Lenis {
|
|
|
331
337
|
*
|
|
332
338
|
* @param time The time in ms from an external clock like `requestAnimationFrame` or Tempus
|
|
333
339
|
*/
|
|
334
|
-
raf(time: number)
|
|
340
|
+
raf: (time: number) => void;
|
|
335
341
|
/**
|
|
336
342
|
* Scroll to a target value
|
|
337
343
|
*
|
package/dist/lenis.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// package.json
|
|
2
|
-
var version = "1.1.
|
|
2
|
+
var version = "1.1.15";
|
|
3
3
|
|
|
4
4
|
// packages/core/src/maths.ts
|
|
5
5
|
function clamp(min, input, max) {
|
|
@@ -336,6 +336,7 @@ var Lenis = class {
|
|
|
336
336
|
// same as isStopped but enabled/disabled when scroll reaches target
|
|
337
337
|
_preventNextNativeScrollEvent = false;
|
|
338
338
|
_resetVelocityTimeout = null;
|
|
339
|
+
__rafID = null;
|
|
339
340
|
/**
|
|
340
341
|
* Whether or not the user is touching the screen
|
|
341
342
|
*/
|
|
@@ -409,6 +410,7 @@ var Lenis = class {
|
|
|
409
410
|
prevent,
|
|
410
411
|
virtualScroll,
|
|
411
412
|
overscroll = true,
|
|
413
|
+
autoRaf = false,
|
|
412
414
|
__experimental__naiveDimensions = false
|
|
413
415
|
} = {}) {
|
|
414
416
|
window.lenisVersion = version;
|
|
@@ -435,6 +437,7 @@ var Lenis = class {
|
|
|
435
437
|
prevent,
|
|
436
438
|
virtualScroll,
|
|
437
439
|
overscroll,
|
|
440
|
+
autoRaf,
|
|
438
441
|
__experimental__naiveDimensions
|
|
439
442
|
};
|
|
440
443
|
this.dimensions = new Dimensions(wrapper, content, { autoResize });
|
|
@@ -451,6 +454,9 @@ var Lenis = class {
|
|
|
451
454
|
wheelMultiplier
|
|
452
455
|
});
|
|
453
456
|
this.virtualScroll.on("scroll", this.onVirtualScroll);
|
|
457
|
+
if (this.options.autoRaf) {
|
|
458
|
+
this.__rafID = requestAnimationFrame(this.raf);
|
|
459
|
+
}
|
|
454
460
|
}
|
|
455
461
|
/**
|
|
456
462
|
* Destroy the lenis instance, remove all event listeners and clean up the class name
|
|
@@ -470,6 +476,9 @@ var Lenis = class {
|
|
|
470
476
|
this.virtualScroll.destroy();
|
|
471
477
|
this.dimensions.destroy();
|
|
472
478
|
this.cleanUpClassName();
|
|
479
|
+
if (this.__rafID) {
|
|
480
|
+
cancelAnimationFrame(this.__rafID);
|
|
481
|
+
}
|
|
473
482
|
}
|
|
474
483
|
on(event, callback) {
|
|
475
484
|
return this.emitter.on(event, callback);
|
|
@@ -623,11 +632,14 @@ var Lenis = class {
|
|
|
623
632
|
*
|
|
624
633
|
* @param time The time in ms from an external clock like `requestAnimationFrame` or Tempus
|
|
625
634
|
*/
|
|
626
|
-
raf(time) {
|
|
635
|
+
raf = (time) => {
|
|
627
636
|
const deltaTime = time - (this.time || time);
|
|
628
637
|
this.time = time;
|
|
629
638
|
this.animate.advance(deltaTime * 1e-3);
|
|
630
|
-
|
|
639
|
+
if (this.options.autoRaf) {
|
|
640
|
+
this.__rafID = requestAnimationFrame(this.raf);
|
|
641
|
+
}
|
|
642
|
+
};
|
|
631
643
|
/**
|
|
632
644
|
* Scroll to a target value
|
|
633
645
|
*
|