lenis 1.3.17-framer → 1.3.18-dev.0
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 +6 -15
- package/dist/lenis-react.d.ts +1 -1
- package/dist/lenis-react.mjs +6 -6
- package/dist/lenis-react.mjs.map +1 -1
- package/dist/lenis-snap.js +15 -10
- package/dist/lenis-snap.js.map +1 -1
- package/dist/lenis-snap.min.js +1 -1
- package/dist/lenis-snap.min.js.map +1 -1
- package/dist/lenis-snap.mjs +15 -10
- package/dist/lenis-snap.mjs.map +1 -1
- package/dist/lenis-vue.d.ts +1 -1
- package/dist/lenis-vue.mjs +10 -11
- package/dist/lenis-vue.mjs.map +1 -1
- package/dist/lenis.d.ts +7 -3
- package/dist/lenis.js +47 -28
- 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 +47 -28
- package/dist/lenis.mjs.map +1 -1
- package/dist/nuxt/runtime/lenis.mjs +5 -2
- package/package.json +5 -6
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
## Introduction
|
|
10
10
|
|
|
11
|
-
Lenis ("smooth" in latin) is a lightweight, robust, and performant smooth scroll library. It's designed by [@darkroom.engineering](https://twitter.com/darkroomdevs) to be simple to use and easy to integrate into your projects. It's built with performance in mind and is optimized for modern browsers. It's perfect for creating smooth scrolling experiences on your website such as WebGL scroll syncing, parallax effects, and much more, see [Demo](https://lenis.darkroom.engineering/) and [Showcase](
|
|
11
|
+
Lenis ("smooth" in latin) is a lightweight, robust, and performant smooth scroll library. It's designed by [@darkroom.engineering](https://twitter.com/darkroomdevs) to be simple to use and easy to integrate into your projects. It's built with performance in mind and is optimized for modern browsers. It's perfect for creating smooth scrolling experiences on your website such as WebGL scroll syncing, parallax effects, and much more, see [Demo](https://lenis.darkroom.engineering/) and [Showcase](https://www.lenis.dev/showcase).
|
|
12
12
|
|
|
13
13
|
Read our [Manifesto](https://github.com/darkroomengineering/lenis/blob/main/MANIFESTO.md) to learn more about the inspiration behind Lenis.
|
|
14
14
|
|
|
@@ -16,6 +16,7 @@ Read our [Manifesto](https://github.com/darkroomengineering/lenis/blob/main/MANI
|
|
|
16
16
|
|
|
17
17
|
- [Sponsors](#sponsors)
|
|
18
18
|
- [Packages](#packages)
|
|
19
|
+
- [Showcase](https://www.lenis.dev/showcase)
|
|
19
20
|
- [Installation](#installation)
|
|
20
21
|
- [Setup](#setup)
|
|
21
22
|
- [Settings](#settings)
|
|
@@ -27,7 +28,6 @@ Read our [Manifesto](https://github.com/darkroomengineering/lenis/blob/main/MANI
|
|
|
27
28
|
- [Troubleshooting](#troubleshooting)
|
|
28
29
|
- [Tutorials](#tutorials)
|
|
29
30
|
- [Plugins](#plugins)
|
|
30
|
-
- [Lenis in Use](#lenis-in-use)
|
|
31
31
|
- [License](#license)
|
|
32
32
|
|
|
33
33
|
<br/>
|
|
@@ -38,11 +38,13 @@ If you’ve used Lenis and it made your site feel just a little more alive, cons
|
|
|
38
38
|
|
|
39
39
|
Your support helps us smooth out the internet one library at a time—and lets us keep building tools that care about the details most folks overlook.
|
|
40
40
|
|
|
41
|
+
<a href="https://www.osmo.supply/?utm_source=lenis.dev"><img src="https://www.lenis.dev/sponsors/osmo.png" width="128"/></a>
|
|
42
|
+
<br/>
|
|
43
|
+
|
|
41
44
|
<!-- sponsors -->
|
|
42
|
-
[](mailto:jesse@cosmos.so) [](https://github.com/smsunarto) [](https://github.com/bizarro) [](https://github.com/itsoffbrand) [](https://github.com/arkconclave) [](mailto:hello@framerpod.com) [](https://github.com/glauber-sampaio) [](https://github.com/cachet-studio) [](https://github.com/OHO-Design) [](https://github.com/joevingracien) [](mailto:webdesignbylazar@gmail.com)
|
|
43
46
|
<!-- sponsors -->
|
|
44
47
|
|
|
45
|
-
<br/>
|
|
46
48
|
<br/>
|
|
47
49
|
<a href="https://vercel.com/oss">
|
|
48
50
|
<img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" />
|
|
@@ -360,17 +362,6 @@ new Lenis({
|
|
|
360
362
|
|
|
361
363
|
<br/>
|
|
362
364
|
|
|
363
|
-
## Lenis in use
|
|
364
|
-
|
|
365
|
-
- [Ibicash](https://ibi.cash/) by [darkroom.engineering](https://darkroom.engineering/)
|
|
366
|
-
- [Grand Theft Auto VI](https://www.rockstargames.com/VI)
|
|
367
|
-
- [Getty - Sculpting Harmony](https://gehry.getty.edu/) by [Resn](https://resn.co.nz/)
|
|
368
|
-
- [Microsoft Design](https://microsoft.design/)
|
|
369
|
-
- [Shopify Supply](https://shopify.supply/)
|
|
370
|
-
- [Metamask](https://metamask.io/) by [Antinomy](https://www.antinomy.studio/)
|
|
371
|
-
|
|
372
|
-
<br/>
|
|
373
|
-
|
|
374
365
|
## License
|
|
375
366
|
|
|
376
367
|
MIT © [darkroom.engineering](https://github.com/darkroomengineering)
|
package/dist/lenis-react.d.ts
CHANGED
|
@@ -100,6 +100,6 @@ declare const ReactLenis: react.ForwardRefExoticComponent<Omit<react.DetailedHTM
|
|
|
100
100
|
* })
|
|
101
101
|
* }
|
|
102
102
|
*/
|
|
103
|
-
declare function useLenis(callback?: ScrollCallback, deps?:
|
|
103
|
+
declare function useLenis(callback?: ScrollCallback, deps?: unknown[], priority?: number): Lenis.default | undefined;
|
|
104
104
|
|
|
105
105
|
export { ReactLenis as Lenis, LenisContext, type LenisContextValue, type LenisProps, type LenisRef, ReactLenis, ReactLenis as default, useLenis };
|
package/dist/lenis-react.mjs
CHANGED
|
@@ -21,7 +21,7 @@ var Store = class {
|
|
|
21
21
|
listeners = [];
|
|
22
22
|
set(state) {
|
|
23
23
|
this.state = state;
|
|
24
|
-
for (
|
|
24
|
+
for (const listener of this.listeners) {
|
|
25
25
|
listener(this.state);
|
|
26
26
|
}
|
|
27
27
|
}
|
|
@@ -82,7 +82,7 @@ var ReactLenis = forwardRef(
|
|
|
82
82
|
lenis2.destroy();
|
|
83
83
|
setLenis(void 0);
|
|
84
84
|
};
|
|
85
|
-
}, [
|
|
85
|
+
}, [autoRaf, JSON.stringify({ ...options, wrapper: null, content: null })]);
|
|
86
86
|
const callbacksRefs = useRef([]);
|
|
87
87
|
const addCallback = useCallback(
|
|
88
88
|
(callback, priority) => {
|
|
@@ -108,8 +108,8 @@ var ReactLenis = forwardRef(
|
|
|
108
108
|
useEffect2(() => {
|
|
109
109
|
if (!lenis) return;
|
|
110
110
|
const onScroll = (data) => {
|
|
111
|
-
for (
|
|
112
|
-
|
|
111
|
+
for (const { callback } of callbacksRefs.current) {
|
|
112
|
+
callback(data);
|
|
113
113
|
}
|
|
114
114
|
};
|
|
115
115
|
lenis.on("scroll", onScroll);
|
|
@@ -137,13 +137,13 @@ function useLenis(callback, deps = [], priority = 0) {
|
|
|
137
137
|
const currentContext = localContext ?? rootContext ?? fallbackContext;
|
|
138
138
|
const { lenis, addCallback, removeCallback } = currentContext;
|
|
139
139
|
useEffect3(() => {
|
|
140
|
-
if (!callback
|
|
140
|
+
if (!(callback && addCallback && removeCallback && lenis)) return;
|
|
141
141
|
addCallback(callback, priority);
|
|
142
142
|
callback(lenis);
|
|
143
143
|
return () => {
|
|
144
144
|
removeCallback(callback);
|
|
145
145
|
};
|
|
146
|
-
}, [lenis, addCallback, removeCallback, priority, ...deps]);
|
|
146
|
+
}, [lenis, addCallback, removeCallback, priority, ...deps, callback]);
|
|
147
147
|
return lenis;
|
|
148
148
|
}
|
|
149
149
|
export {
|
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 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 ...props\r\n }: LenisProps,\r\n ref\r\n ) => {\r\n const wrapperRef = useRef<HTMLDivElement>(null)\r\n const contentRef = useRef<HTMLDivElement>(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 ...(wrapperRef.current &&\r\n contentRef.current && {\r\n wrapper: wrapperRef.current!,\r\n content: contentRef.current!,\r\n }),\r\n autoRaf: options?.autoRaf ?? autoRaf, // this is to avoid breaking the autoRaf prop if it's still used (require breaking change)\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, wrapper: null, content: null })])\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 if (!children) return null\r\n\r\n return (\r\n <LenisContext.Provider\r\n value={{ lenis: lenis!, addCallback, removeCallback }}\r\n >\r\n {root && root !== 'asChild' ? (\r\n children\r\n ) : (\r\n <div ref={wrapperRef} {...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'\n\ntype Listener<S> = (state: S) => void\n\nexport class Store<S> {\n private listeners: Listener<S>[] = []\n\n constructor(private state: S) {}\n\n set(state: S) {\n this.state = state\n\n for (let listener of this.listeners) {\n listener(this.state)\n }\n }\n\n subscribe(listener: Listener<S>) {\n this.listeners = [...this.listeners, listener]\n return () => {\n this.listeners = this.listeners.filter((l) => l !== listener)\n }\n }\n\n get() {\n return this.state\n }\n}\n\nexport function useStore<S>(store: Store<S>) {\n const [state, setState] = useState(store.get())\n\n useEffect(() => {\n return store.subscribe((state) => setState(state))\n }, [store])\n\n return state\n}\n","import type { ScrollCallback } from 'lenis'\nimport { useContext, useEffect } from 'react'\nimport { LenisContext, rootLenisContextStore } from './provider'\nimport { useStore } from './store'\nimport type { LenisContextValue } from './types'\n\n// Fall back to an empty object if both context and store are not available\nconst fallbackContext: Partial<LenisContextValue> = {}\n\n/**\n * Hook to access the Lenis instance and its methods\n *\n * @example <caption>Scroll callback</caption>\n * useLenis((lenis) => {\n * if (lenis.isScrolling) {\n * console.log('Scrolling...')\n * }\n *\n * if (lenis.progress === 1) {\n * console.log('At the end!')\n * }\n * })\n *\n * @example <caption>Scroll callback with dependencies</caption>\n * useLenis((lenis) => {\n * if (lenis.isScrolling) {\n * console.log('Scrolling...', someDependency)\n * }\n * }, [someDependency])\n * @example <caption>Scroll callback with priority</caption>\n * useLenis((lenis) => {\n * if (lenis.isScrolling) {\n * console.log('Scrolling...')\n * }\n * }, [], 1)\n * @example <caption>Instance access</caption>\n * const lenis = useLenis()\n *\n * handleClick() {\n * lenis.scrollTo(100, {\n * lerp: 0.1,\n * duration: 1,\n * easing: (t) => t,\n * onComplete: () => {\n * console.log('Complete!')\n * }\n * })\n * }\n */\nexport function useLenis(\n callback?: ScrollCallback,\n deps: any[] = [],\n priority = 0\n) {\n // Try to get the lenis instance from the context first\n const localContext = useContext(LenisContext)\n // Fall back to the root store if the context is not available\n const rootContext = useStore(rootLenisContextStore)\n // Fall back to the fallback context if all else fails\n const currentContext = localContext ?? rootContext ?? fallbackContext\n\n const { lenis, addCallback, removeCallback } = currentContext\n\n useEffect(() => {\n if (!callback || !addCallback || !removeCallback || !lenis) return\n\n addCallback(callback, priority)\n callback(lenis)\n\n return () => {\n removeCallback(callback)\n }\n }, [lenis, addCallback, removeCallback, priority, ...deps])\n\n return lenis\n}\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'\nimport {\n createContext,\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react'\nimport { Store } from './store'\nimport type { LenisContextValue, LenisProps, LenisRef } from './types'\n\nexport const LenisContext = createContext<LenisContextValue | null>(null)\n\n/**\n * The root store for the lenis context\n *\n * This store serves as a fallback for the context if it is not available\n * and allows us to use the global lenis instance above a provider\n */\nexport const rootLenisContextStore = new Store<LenisContextValue | null>(null)\n\n/**\n * React component to setup a Lenis instance\n */\nexport const ReactLenis = forwardRef<LenisRef, LenisProps>(\n (\n {\n children,\n root = false,\n options = {},\n autoRaf = true,\n ...props\n }: LenisProps,\n ref\n ) => {\n const wrapperRef = useRef<HTMLDivElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n\n const [lenis, setLenis] = useState<Lenis | undefined>(undefined)\n\n // Setup ref\n useImperativeHandle(\n ref,\n () => ({\n wrapper: wrapperRef.current,\n content: contentRef.current,\n lenis,\n }),\n [lenis]\n )\n\n // Setup lenis instance\n useEffect(() => {\n const lenis = new Lenis({\n ...options,\n ...(wrapperRef.current &&\n contentRef.current && {\n wrapper: wrapperRef.current!,\n content: contentRef.current!,\n }),\n autoRaf: options?.autoRaf ?? autoRaf, // this is to avoid breaking the autoRaf prop if it's still used (require breaking change)\n })\n\n setLenis(lenis)\n\n return () => {\n lenis.destroy()\n setLenis(undefined)\n }\n }, [autoRaf, JSON.stringify({ ...options, wrapper: null, content: null })])\n\n // Handle callbacks\n const callbacksRefs = useRef<\n {\n callback: ScrollCallback\n priority: number\n }[]\n >([])\n\n const addCallback: LenisContextValue['addCallback'] = useCallback(\n (callback, priority) => {\n callbacksRefs.current.push({ callback, priority })\n callbacksRefs.current.sort((a, b) => a.priority - b.priority)\n },\n []\n )\n\n const removeCallback: LenisContextValue['removeCallback'] = useCallback(\n (callback) => {\n callbacksRefs.current = callbacksRefs.current.filter(\n (cb) => cb.callback !== callback\n )\n },\n []\n )\n\n // This makes sure to set the global context if the root is true\n useEffect(() => {\n if (root && lenis) {\n rootLenisContextStore.set({ lenis, addCallback, removeCallback })\n\n return () => rootLenisContextStore.set(null)\n }\n }, [root, lenis, addCallback, removeCallback])\n\n // Setup callback listeners\n useEffect(() => {\n if (!lenis) return\n\n const onScroll: ScrollCallback = (data) => {\n for (const { callback } of callbacksRefs.current) {\n callback(data)\n }\n }\n\n lenis.on('scroll', onScroll)\n\n return () => {\n lenis.off('scroll', onScroll)\n }\n }, [lenis])\n\n if (!children) return null\n\n return (\n <LenisContext.Provider\n value={{ lenis: lenis!, addCallback, removeCallback }}\n >\n {root && root !== 'asChild' ? (\n children\n ) : (\n <div ref={wrapperRef} {...props}>\n <div ref={contentRef}>{children}</div>\n </div>\n )}\n </LenisContext.Provider>\n )\n }\n)\n","import { useEffect, useState } from 'react'\n\ntype Listener<S> = (state: S) => void\n\nexport class Store<S> {\n private listeners: Listener<S>[] = []\n\n constructor(private state: S) {}\n\n set(state: S) {\n this.state = state\n\n for (const listener of this.listeners) {\n listener(this.state)\n }\n }\n\n subscribe(listener: Listener<S>) {\n this.listeners = [...this.listeners, listener]\n return () => {\n this.listeners = this.listeners.filter((l) => l !== listener)\n }\n }\n\n get() {\n return this.state\n }\n}\n\nexport function useStore<S>(store: Store<S>) {\n const [state, setState] = useState(store.get())\n\n useEffect(() => {\n return store.subscribe((state) => setState(state))\n }, [store])\n\n return state\n}\n","import type { ScrollCallback } from 'lenis'\nimport { useContext, useEffect } from 'react'\nimport { LenisContext, rootLenisContextStore } from './provider'\nimport { useStore } from './store'\nimport type { LenisContextValue } from './types'\n\n// Fall back to an empty object if both context and store are not available\nconst fallbackContext: Partial<LenisContextValue> = {}\n\n/**\n * Hook to access the Lenis instance and its methods\n *\n * @example <caption>Scroll callback</caption>\n * useLenis((lenis) => {\n * if (lenis.isScrolling) {\n * console.log('Scrolling...')\n * }\n *\n * if (lenis.progress === 1) {\n * console.log('At the end!')\n * }\n * })\n *\n * @example <caption>Scroll callback with dependencies</caption>\n * useLenis((lenis) => {\n * if (lenis.isScrolling) {\n * console.log('Scrolling...', someDependency)\n * }\n * }, [someDependency])\n * @example <caption>Scroll callback with priority</caption>\n * useLenis((lenis) => {\n * if (lenis.isScrolling) {\n * console.log('Scrolling...')\n * }\n * }, [], 1)\n * @example <caption>Instance access</caption>\n * const lenis = useLenis()\n *\n * handleClick() {\n * lenis.scrollTo(100, {\n * lerp: 0.1,\n * duration: 1,\n * easing: (t) => t,\n * onComplete: () => {\n * console.log('Complete!')\n * }\n * })\n * }\n */\nexport function useLenis(\n callback?: ScrollCallback,\n deps: unknown[] = [],\n priority = 0\n) {\n // Try to get the lenis instance from the context first\n const localContext = useContext(LenisContext)\n // Fall back to the root store if the context is not available\n const rootContext = useStore(rootLenisContextStore)\n // Fall back to the fallback context if all else fails\n const currentContext = localContext ?? rootContext ?? fallbackContext\n\n const { lenis, addCallback, removeCallback } = currentContext\n\n useEffect(() => {\n if (!(callback && addCallback && removeCallback && lenis)) return\n\n addCallback(callback, priority)\n callback(lenis)\n\n return () => {\n removeCallback(callback)\n }\n }, [lenis, addCallback, removeCallback, priority, ...deps, callback])\n\n return lenis\n}\n"],"mappings":"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","names":["useEffect","useState","state","useState","useEffect","lenis","useEffect","useEffect"]}
|
package/dist/lenis-snap.js
CHANGED
|
@@ -2,11 +2,10 @@
|
|
|
2
2
|
function debounce(callback, delay) {
|
|
3
3
|
let timer;
|
|
4
4
|
return function(...args) {
|
|
5
|
-
let context = this;
|
|
6
5
|
clearTimeout(timer);
|
|
7
6
|
timer = setTimeout(() => {
|
|
8
7
|
timer = void 0;
|
|
9
|
-
callback.apply(
|
|
8
|
+
callback.apply(this, args);
|
|
10
9
|
}, delay);
|
|
11
10
|
};
|
|
12
11
|
}
|
|
@@ -64,7 +63,7 @@ var SnapElement = class {
|
|
|
64
63
|
element;
|
|
65
64
|
options;
|
|
66
65
|
align;
|
|
67
|
-
// @ts-
|
|
66
|
+
// @ts-expect-error
|
|
68
67
|
rect = {};
|
|
69
68
|
wrapperResizeObserver;
|
|
70
69
|
resizeObserver;
|
|
@@ -116,7 +115,8 @@ var SnapElement = class {
|
|
|
116
115
|
this.rect.right = left + width;
|
|
117
116
|
}
|
|
118
117
|
onWrapperResize = () => {
|
|
119
|
-
let top
|
|
118
|
+
let top;
|
|
119
|
+
let left;
|
|
120
120
|
if (this.options.ignoreSticky) removeParentSticky(this.element);
|
|
121
121
|
if (this.options.ignoreTransform) {
|
|
122
122
|
top = offsetTop(this.element);
|
|
@@ -169,7 +169,10 @@ var Snap = class {
|
|
|
169
169
|
};
|
|
170
170
|
this.onWindowResize();
|
|
171
171
|
window.addEventListener("resize", this.onWindowResize, false);
|
|
172
|
-
this.onSnapDebounced = debounce(
|
|
172
|
+
this.onSnapDebounced = debounce(
|
|
173
|
+
this.onSnap,
|
|
174
|
+
this.options.debounce
|
|
175
|
+
);
|
|
173
176
|
this.lenis.on("virtual-scroll", this.onSnapDebounced);
|
|
174
177
|
}
|
|
175
178
|
options;
|
|
@@ -296,8 +299,8 @@ var Snap = class {
|
|
|
296
299
|
});
|
|
297
300
|
}
|
|
298
301
|
get distanceThreshold() {
|
|
299
|
-
let distanceThreshold =
|
|
300
|
-
if (this.options.type === "mandatory") return
|
|
302
|
+
let distanceThreshold = Number.POSITIVE_INFINITY;
|
|
303
|
+
if (this.options.type === "mandatory") return Number.POSITIVE_INFINITY;
|
|
301
304
|
const { isHorizontal } = this.lenis;
|
|
302
305
|
const axis = isHorizontal ? "width" : "height";
|
|
303
306
|
if (typeof this.options.distanceThreshold === "string" && this.options.distanceThreshold.endsWith("%")) {
|
|
@@ -330,9 +333,9 @@ var Snap = class {
|
|
|
330
333
|
}
|
|
331
334
|
} else {
|
|
332
335
|
const prevSnap = snaps[prevSnapIndex];
|
|
333
|
-
const distanceToPrevSnap = prevSnap ? Math.abs(scroll - prevSnap.value) :
|
|
336
|
+
const distanceToPrevSnap = prevSnap ? Math.abs(scroll - prevSnap.value) : Number.POSITIVE_INFINITY;
|
|
334
337
|
const nextSnap = snaps[nextSnapIndex];
|
|
335
|
-
const distanceToNextSnap = nextSnap ? Math.abs(scroll - nextSnap.value) :
|
|
338
|
+
const distanceToNextSnap = nextSnap ? Math.abs(scroll - nextSnap.value) : Number.POSITIVE_INFINITY;
|
|
336
339
|
snapIndex = distanceToPrevSnap < distanceToNextSnap ? prevSnapIndex : nextSnapIndex;
|
|
337
340
|
}
|
|
338
341
|
if (snapIndex === void 0) return;
|
|
@@ -345,7 +348,9 @@ var Snap = class {
|
|
|
345
348
|
}
|
|
346
349
|
};
|
|
347
350
|
resize() {
|
|
348
|
-
this.elements.forEach((element) =>
|
|
351
|
+
this.elements.forEach((element) => {
|
|
352
|
+
element.onWrapperResize();
|
|
353
|
+
});
|
|
349
354
|
}
|
|
350
355
|
};
|
|
351
356
|
|
package/dist/lenis-snap.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/snap/src/debounce.ts","../packages/snap/src/element.ts","../packages/snap/src/uid.ts","../packages/snap/src/snap.ts","../packages/snap/browser.ts"],"sourcesContent":["export function debounce<CB extends (...args: any[]) => void>(\r\n callback: CB,\r\n delay: number\r\n) {\r\n let timer: ReturnType<typeof setTimeout> | undefined\r\n return function <T>(this: T, ...args: Parameters<typeof callback>): void {\r\n let context = this\r\n clearTimeout(timer)\r\n timer = setTimeout(() => {\r\n timer = undefined\r\n callback.apply(context, args)\r\n }, delay)\r\n }\r\n}\r\n","import { debounce } from './debounce'\r\n\r\nfunction removeParentSticky(element: HTMLElement) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element: HTMLElement) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction offsetTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport type SnapElementOptions = {\r\n align?: string | string[]\r\n ignoreSticky?: boolean\r\n ignoreTransform?: boolean\r\n}\r\n\r\ntype Rect = {\r\n top: number\r\n left: number\r\n width: number\r\n height: number\r\n x: number\r\n y: number\r\n bottom: number\r\n right: number\r\n element: HTMLElement\r\n}\r\n\r\nexport class SnapElement {\r\n element: HTMLElement\r\n options: SnapElementOptions\r\n align: string[]\r\n // @ts-ignore\r\n rect: Rect = {}\r\n wrapperResizeObserver: ResizeObserver\r\n resizeObserver: ResizeObserver\r\n debouncedWrapperResize: () => void\r\n\r\n constructor(\r\n element: HTMLElement,\r\n {\r\n align = ['start'],\r\n ignoreSticky = true,\r\n ignoreTransform = false,\r\n }: SnapElementOptions = {}\r\n ) {\r\n this.element = element\r\n\r\n this.options = { align, ignoreSticky, ignoreTransform }\r\n\r\n this.align = [align].flat()\r\n\r\n this.debouncedWrapperResize = debounce(this.onWrapperResize, 500)\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.debouncedWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n this.onWrapperResize()\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n this.setRect({\r\n width: this.element.offsetWidth,\r\n height: this.element.offsetHeight,\r\n })\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({\r\n top,\r\n left,\r\n width,\r\n height,\r\n element,\r\n }: {\r\n top?: number\r\n left?: number\r\n width?: number\r\n height?: number\r\n element?: HTMLElement\r\n } = {}) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.options.ignoreSticky) removeParentSticky(this.element)\r\n if (this.options.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.options.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]: ResizeObserverEntry[]) => {\r\n if (!entry?.borderBoxSize[0]) return\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","let index = 0\n\nexport type UID = number\n\nexport function uid(): UID {\n return index++\n}\n","import type Lenis from 'lenis'\r\nimport type { VirtualScrollData } from 'lenis'\r\nimport { debounce } from './debounce'\r\nimport type { SnapElementOptions } from './element'\r\nimport { SnapElement } from './element'\r\nimport type { SnapItem, SnapOptions } from './types'\r\nimport type { UID } from './uid'\r\nimport { uid } from './uid'\r\n\r\n// TODO:\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - arrow, spacebar\r\n\r\ntype RequiredPick<T, F extends keyof T> = Omit<T, F> & Required<Pick<T, F>>\r\n\r\n/**\r\n * Snap class to handle the snap functionality\r\n *\r\n * @example\r\n * const snap = new Snap(lenis, {\r\n * type: 'mandatory', // 'mandatory', 'proximity' or 'lock'\r\n * onSnapStart: (snap) => {\r\n * console.log('onSnapStart', snap)\r\n * },\r\n * onSnapComplete: (snap) => {\r\n * console.log('onSnapComplete', snap)\r\n * },\r\n * })\r\n *\r\n * snap.add(500) // snap at 500px\r\n *\r\n * const removeSnap = snap.add(500)\r\n *\r\n * if (someCondition) {\r\n * removeSnap()\r\n * }\r\n */\r\nexport class Snap {\r\n options: RequiredPick<SnapOptions, 'type' | 'debounce'>\r\n elements = new Map<UID, SnapElement>()\r\n snaps = new Map<UID, SnapItem>()\r\n viewport: { width: number; height: number } = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n isStopped = false\r\n onSnapDebounced: (e: VirtualScrollData) => void\r\n currentSnapIndex?: number\r\n\r\n constructor(\r\n private lenis: Lenis,\r\n {\r\n type = 'proximity',\r\n lerp,\r\n easing,\r\n duration,\r\n distanceThreshold = '50%', // useless when type is \"mandatory\"\r\n debounce: debounceDelay = 500,\r\n onSnapStart,\r\n onSnapComplete,\r\n }: SnapOptions = {}\r\n ) {\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n distanceThreshold,\r\n debounce: debounceDelay,\r\n onSnapStart,\r\n onSnapComplete,\r\n }\r\n\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize, false)\r\n\r\n this.onSnapDebounced = debounce(this.onSnap, this.options.debounce)\r\n\r\n this.lenis.on('virtual-scroll', this.onSnapDebounced)\r\n }\r\n\r\n /**\r\n * Destroy the snap instance\r\n */\r\n destroy() {\r\n this.lenis.off('virtual-scroll', this.onSnapDebounced)\r\n window.removeEventListener('resize', this.onWindowResize, false)\r\n this.elements.forEach((element) => {\r\n element.destroy()\r\n })\r\n }\r\n\r\n /**\r\n * Start the snap after it has been stopped\r\n */\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n /**\r\n * Stop the snap\r\n */\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n /**\r\n * Add a snap to the snap instance\r\n *\r\n * @param value The value to snap to\r\n * @param userData User data that will be forwarded through the snap event\r\n * @returns Unsubscribe function\r\n */\r\n add(value: number): () => void {\r\n const id = uid()\r\n\r\n this.snaps.set(id, { value })\r\n\r\n return () => this.snaps.delete(id)\r\n }\r\n\r\n /**\r\n * Add an element to the snap instance\r\n *\r\n * @param element The element to add\r\n * @param options The options for the element\r\n * @returns Unsubscribe function\r\n */\r\n addElement(\r\n element: HTMLElement,\r\n options: SnapElementOptions = {}\r\n ): () => void {\r\n const id = uid()\r\n\r\n this.elements.set(id, new SnapElement(element, options))\r\n\r\n return () => this.elements.delete(id)\r\n }\r\n\r\n addElements(\r\n elements: HTMLElement[],\r\n options: SnapElementOptions = {}\r\n ): () => void {\r\n const map = [...elements].map((element) =>\r\n this.addElement(element, options)\r\n )\r\n return () => {\r\n map.forEach((remove) => {\r\n remove()\r\n })\r\n }\r\n }\r\n\r\n private onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n private computeSnaps = () => {\r\n const { isHorizontal } = this.lenis\r\n\r\n let snaps = [...this.snaps.values()] as SnapItem[]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let value: number | undefined\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n value = rect.top\r\n } else if (align === 'center') {\r\n value = isHorizontal\r\n ? rect.left + rect.width / 2 - this.viewport.width / 2\r\n : rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n value = isHorizontal\r\n ? rect.left + rect.width - this.viewport.width\r\n : rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (typeof value === 'number') {\r\n snaps.push({ value: Math.ceil(value) })\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a.value) - Math.abs(b.value))\r\n\r\n return snaps\r\n }\r\n\r\n previous() {\r\n this.goTo((this.currentSnapIndex ?? 0) - 1)\r\n }\r\n\r\n next() {\r\n this.goTo((this.currentSnapIndex ?? 0) + 1)\r\n }\r\n\r\n goTo(index: number) {\r\n const snaps = this.computeSnaps()\r\n\r\n if (snaps.length === 0) return\r\n\r\n this.currentSnapIndex = Math.max(0, Math.min(index, snaps.length - 1))\r\n\r\n const currentSnap = snaps[this.currentSnapIndex]\r\n if (currentSnap === undefined) return\r\n\r\n this.lenis.scrollTo(currentSnap.value, {\r\n duration: this.options.duration,\r\n easing: this.options.easing,\r\n lerp: this.options.lerp,\r\n lock: this.options.type === 'lock',\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.options.onSnapStart?.({\r\n index: this.currentSnapIndex,\r\n ...currentSnap,\r\n })\r\n },\r\n onComplete: () => {\r\n this.options.onSnapComplete?.({\r\n index: this.currentSnapIndex,\r\n ...currentSnap,\r\n })\r\n },\r\n })\r\n }\r\n\r\n get distanceThreshold() {\r\n let distanceThreshold = Infinity\r\n if (this.options.type === 'mandatory') return Infinity\r\n\r\n const { isHorizontal } = this.lenis\r\n\r\n const axis = isHorizontal ? 'width' : 'height'\r\n\r\n if (\r\n typeof this.options.distanceThreshold === 'string' &&\r\n this.options.distanceThreshold.endsWith('%')\r\n ) {\r\n distanceThreshold =\r\n (Number(this.options.distanceThreshold.replace('%', '')) / 100) *\r\n this.viewport[axis]\r\n } else if (typeof this.options.distanceThreshold === 'number') {\r\n distanceThreshold = this.options.distanceThreshold\r\n } else {\r\n distanceThreshold = this.viewport[axis]\r\n }\r\n\r\n return distanceThreshold\r\n }\r\n\r\n private onSnap = (e: VirtualScrollData) => {\r\n if (this.isStopped) return\r\n\r\n if (e.event.type === 'touchmove') return\r\n\r\n if (\r\n this.options.type === 'lock' &&\r\n this.lenis.userData?.initiator === 'snap'\r\n )\r\n return\r\n\r\n let { scroll, isHorizontal } = this.lenis\r\n const delta = isHorizontal ? e.deltaX : e.deltaY\r\n scroll = Math.ceil(this.lenis.scroll + delta)\r\n\r\n const snaps = this.computeSnaps()\r\n\r\n if (snaps.length === 0) return\r\n\r\n let snapIndex\r\n\r\n const prevSnapIndex = snaps.findLastIndex(({ value }) => value < scroll)\r\n const nextSnapIndex = snaps.findIndex(({ value }) => value > scroll)\r\n\r\n if (this.options.type === 'lock') {\r\n if (delta > 0) {\r\n snapIndex = nextSnapIndex\r\n } else if (delta < 0) {\r\n snapIndex = prevSnapIndex\r\n }\r\n } else {\r\n const prevSnap = snaps[prevSnapIndex]!\r\n const distanceToPrevSnap = prevSnap\r\n ? Math.abs(scroll - prevSnap.value)\r\n : Infinity\r\n\r\n const nextSnap = snaps[nextSnapIndex]!\r\n const distanceToNextSnap = nextSnap\r\n ? Math.abs(scroll - nextSnap.value)\r\n : Infinity\r\n snapIndex =\r\n distanceToPrevSnap < distanceToNextSnap ? prevSnapIndex : nextSnapIndex\r\n }\r\n\r\n if (snapIndex === undefined) return\r\n if (snapIndex === -1) return\r\n\r\n snapIndex = Math.max(0, Math.min(snapIndex, snaps.length - 1))\r\n\r\n const snap = snaps[snapIndex]!\r\n\r\n const distance = Math.abs(scroll - snap.value)\r\n\r\n if (distance <= this.distanceThreshold) {\r\n this.goTo(snapIndex)\r\n }\r\n }\r\n\r\n resize() {\r\n this.elements.forEach((element) => element.onWrapperResize())\r\n }\r\n}\r\n","// This file serves as an entry point for the package\nimport { Snap } from './src/snap'\nglobalThis.Snap = Snap\n"],"mappings":"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","names":["align","index"]}
|
|
1
|
+
{"version":3,"sources":["../packages/snap/src/debounce.ts","../packages/snap/src/element.ts","../packages/snap/src/uid.ts","../packages/snap/src/snap.ts","../packages/snap/browser.ts"],"sourcesContent":["export function debounce<CB extends (...args: unknown[]) => void>(\n callback: CB,\n delay: number\n) {\n let timer: ReturnType<typeof setTimeout> | undefined\n return function <T>(this: T, ...args: Parameters<typeof callback>): void {\n clearTimeout(timer)\n timer = setTimeout(() => {\n timer = undefined\n callback.apply(this, args)\n }, delay)\n }\n}\n","import { debounce } from './debounce'\n\nfunction removeParentSticky(element: HTMLElement) {\n const position = getComputedStyle(element).position\n\n const isSticky = position === 'sticky'\n\n if (isSticky) {\n element.style.setProperty('position', 'static')\n element.dataset.sticky = 'true'\n }\n\n if (element.offsetParent) {\n removeParentSticky(element.offsetParent as HTMLElement)\n }\n}\n\nfunction addParentSticky(element: HTMLElement) {\n if (element?.dataset?.sticky === 'true') {\n element.style.removeProperty('position')\n delete element.dataset.sticky\n }\n\n if (element.offsetParent) {\n addParentSticky(element.offsetParent as HTMLElement)\n }\n}\n\nfunction offsetTop(element: HTMLElement, accumulator = 0) {\n const top = accumulator + element.offsetTop\n if (element.offsetParent) {\n return offsetTop(element.offsetParent as HTMLElement, top)\n }\n return top\n}\n\nfunction offsetLeft(element: HTMLElement, accumulator = 0) {\n const left = accumulator + element.offsetLeft\n if (element.offsetParent) {\n return offsetLeft(element.offsetParent as HTMLElement, left)\n }\n return left\n}\n\nfunction scrollTop(element: HTMLElement, accumulator = 0) {\n const top = accumulator + element.scrollTop\n if (element.offsetParent) {\n return scrollTop(element.offsetParent as HTMLElement, top)\n }\n return top + window.scrollY\n}\n\nfunction scrollLeft(element: HTMLElement, accumulator = 0) {\n const left = accumulator + element.scrollLeft\n if (element.offsetParent) {\n return scrollLeft(element.offsetParent as HTMLElement, left)\n }\n return left + window.scrollX\n}\n\nexport type SnapElementOptions = {\n align?: string | string[]\n ignoreSticky?: boolean\n ignoreTransform?: boolean\n}\n\ntype Rect = {\n top: number\n left: number\n width: number\n height: number\n x: number\n y: number\n bottom: number\n right: number\n element: HTMLElement\n}\n\nexport class SnapElement {\n element: HTMLElement\n options: SnapElementOptions\n align: string[]\n // @ts-expect-error\n rect: Rect = {}\n wrapperResizeObserver: ResizeObserver\n resizeObserver: ResizeObserver\n debouncedWrapperResize: () => void\n\n constructor(\n element: HTMLElement,\n {\n align = ['start'],\n ignoreSticky = true,\n ignoreTransform = false,\n }: SnapElementOptions = {}\n ) {\n this.element = element\n\n this.options = { align, ignoreSticky, ignoreTransform }\n\n this.align = [align].flat()\n\n this.debouncedWrapperResize = debounce(this.onWrapperResize, 500)\n\n this.wrapperResizeObserver = new ResizeObserver(this.debouncedWrapperResize)\n this.wrapperResizeObserver.observe(document.body)\n this.onWrapperResize()\n\n this.resizeObserver = new ResizeObserver(this.onResize)\n this.resizeObserver.observe(this.element)\n this.setRect({\n width: this.element.offsetWidth,\n height: this.element.offsetHeight,\n })\n }\n\n destroy() {\n this.wrapperResizeObserver.disconnect()\n this.resizeObserver.disconnect()\n }\n\n setRect({\n top,\n left,\n width,\n height,\n element,\n }: {\n top?: number\n left?: number\n width?: number\n height?: number\n element?: HTMLElement\n } = {}) {\n top = top ?? this.rect.top\n left = left ?? this.rect.left\n width = width ?? this.rect.width\n height = height ?? this.rect.height\n element = element ?? this.rect.element\n\n if (\n top === this.rect.top &&\n left === this.rect.left &&\n width === this.rect.width &&\n height === this.rect.height &&\n element === this.rect.element\n )\n return\n\n this.rect.top = top\n this.rect.y = top\n this.rect.width = width\n this.rect.height = height\n this.rect.left = left\n this.rect.x = left\n this.rect.bottom = top + height\n this.rect.right = left + width\n }\n\n onWrapperResize = () => {\n let top: number | undefined\n let left: number | undefined\n\n if (this.options.ignoreSticky) removeParentSticky(this.element)\n if (this.options.ignoreTransform) {\n top = offsetTop(this.element)\n left = offsetLeft(this.element)\n } else {\n const rect = this.element.getBoundingClientRect()\n top = rect.top + scrollTop(this.element)\n left = rect.left + scrollLeft(this.element)\n }\n if (this.options.ignoreSticky) addParentSticky(this.element)\n\n this.setRect({ top, left })\n }\n\n onResize = ([entry]: ResizeObserverEntry[]) => {\n if (!entry?.borderBoxSize[0]) return\n const width = entry.borderBoxSize[0].inlineSize\n const height = entry.borderBoxSize[0].blockSize\n\n this.setRect({ width, height })\n }\n}\n","let index = 0\n\nexport type UID = number\n\nexport function uid(): UID {\n return index++\n}\n","import type Lenis from 'lenis'\nimport type { VirtualScrollData } from 'lenis'\nimport { debounce } from './debounce'\nimport type { SnapElementOptions } from './element'\nimport { SnapElement } from './element'\nimport type { SnapItem, SnapOptions } from './types'\nimport type { UID } from './uid'\nimport { uid } from './uid'\n\n// TODO:\n// - fix wheel scrolling after limits (see console scroll to)\n// - arrow, spacebar\n\ntype RequiredPick<T, F extends keyof T> = Omit<T, F> & Required<Pick<T, F>>\n\n/**\n * Snap class to handle the snap functionality\n *\n * @example\n * const snap = new Snap(lenis, {\n * type: 'mandatory', // 'mandatory', 'proximity' or 'lock'\n * onSnapStart: (snap) => {\n * console.log('onSnapStart', snap)\n * },\n * onSnapComplete: (snap) => {\n * console.log('onSnapComplete', snap)\n * },\n * })\n *\n * snap.add(500) // snap at 500px\n *\n * const removeSnap = snap.add(500)\n *\n * if (someCondition) {\n * removeSnap()\n * }\n */\nexport class Snap {\n options: RequiredPick<SnapOptions, 'type' | 'debounce'>\n elements = new Map<UID, SnapElement>()\n snaps = new Map<UID, SnapItem>()\n viewport: { width: number; height: number } = {\n width: window.innerWidth,\n height: window.innerHeight,\n }\n isStopped = false\n onSnapDebounced: (e: VirtualScrollData) => void\n currentSnapIndex?: number\n\n constructor(\n private lenis: Lenis,\n {\n type = 'proximity',\n lerp,\n easing,\n duration,\n distanceThreshold = '50%', // useless when type is \"mandatory\"\n debounce: debounceDelay = 500,\n onSnapStart,\n onSnapComplete,\n }: SnapOptions = {}\n ) {\n this.options = {\n type,\n lerp,\n easing,\n duration,\n distanceThreshold,\n debounce: debounceDelay,\n onSnapStart,\n onSnapComplete,\n }\n\n this.onWindowResize()\n window.addEventListener('resize', this.onWindowResize, false)\n\n this.onSnapDebounced = debounce(\n this.onSnap as (...args: unknown[]) => void,\n this.options.debounce\n )\n\n this.lenis.on('virtual-scroll', this.onSnapDebounced)\n }\n\n /**\n * Destroy the snap instance\n */\n destroy() {\n this.lenis.off('virtual-scroll', this.onSnapDebounced)\n window.removeEventListener('resize', this.onWindowResize, false)\n this.elements.forEach((element) => {\n element.destroy()\n })\n }\n\n /**\n * Start the snap after it has been stopped\n */\n start() {\n this.isStopped = false\n }\n\n /**\n * Stop the snap\n */\n stop() {\n this.isStopped = true\n }\n\n /**\n * Add a snap to the snap instance\n *\n * @param value The value to snap to\n * @param userData User data that will be forwarded through the snap event\n * @returns Unsubscribe function\n */\n add(value: number): () => void {\n const id = uid()\n\n this.snaps.set(id, { value })\n\n return () => this.snaps.delete(id)\n }\n\n /**\n * Add an element to the snap instance\n *\n * @param element The element to add\n * @param options The options for the element\n * @returns Unsubscribe function\n */\n addElement(\n element: HTMLElement,\n options: SnapElementOptions = {}\n ): () => void {\n const id = uid()\n\n this.elements.set(id, new SnapElement(element, options))\n\n return () => this.elements.delete(id)\n }\n\n addElements(\n elements: HTMLElement[],\n options: SnapElementOptions = {}\n ): () => void {\n const map = [...elements].map((element) =>\n this.addElement(element, options)\n )\n return () => {\n map.forEach((remove) => {\n remove()\n })\n }\n }\n\n private onWindowResize = () => {\n this.viewport.width = window.innerWidth\n this.viewport.height = window.innerHeight\n }\n\n private computeSnaps = () => {\n const { isHorizontal } = this.lenis\n\n let snaps = [...this.snaps.values()] as SnapItem[]\n\n this.elements.forEach(({ rect, align }) => {\n let value: number | undefined\n\n align.forEach((align) => {\n if (align === 'start') {\n value = rect.top\n } else if (align === 'center') {\n value = isHorizontal\n ? rect.left + rect.width / 2 - this.viewport.width / 2\n : rect.top + rect.height / 2 - this.viewport.height / 2\n } else if (align === 'end') {\n value = isHorizontal\n ? rect.left + rect.width - this.viewport.width\n : rect.top + rect.height - this.viewport.height\n }\n\n if (typeof value === 'number') {\n snaps.push({ value: Math.ceil(value) })\n }\n })\n })\n\n snaps = snaps.sort((a, b) => Math.abs(a.value) - Math.abs(b.value))\n\n return snaps\n }\n\n previous() {\n this.goTo((this.currentSnapIndex ?? 0) - 1)\n }\n\n next() {\n this.goTo((this.currentSnapIndex ?? 0) + 1)\n }\n\n goTo(index: number) {\n const snaps = this.computeSnaps()\n\n if (snaps.length === 0) return\n\n this.currentSnapIndex = Math.max(0, Math.min(index, snaps.length - 1))\n\n const currentSnap = snaps[this.currentSnapIndex]\n if (currentSnap === undefined) return\n\n this.lenis.scrollTo(currentSnap.value, {\n duration: this.options.duration,\n easing: this.options.easing,\n lerp: this.options.lerp,\n lock: this.options.type === 'lock',\n userData: { initiator: 'snap' },\n onStart: () => {\n this.options.onSnapStart?.({\n index: this.currentSnapIndex,\n ...currentSnap,\n })\n },\n onComplete: () => {\n this.options.onSnapComplete?.({\n index: this.currentSnapIndex,\n ...currentSnap,\n })\n },\n })\n }\n\n get distanceThreshold() {\n let distanceThreshold = Number.POSITIVE_INFINITY\n if (this.options.type === 'mandatory') return Number.POSITIVE_INFINITY\n\n const { isHorizontal } = this.lenis\n\n const axis = isHorizontal ? 'width' : 'height'\n\n if (\n typeof this.options.distanceThreshold === 'string' &&\n this.options.distanceThreshold.endsWith('%')\n ) {\n distanceThreshold =\n (Number(this.options.distanceThreshold.replace('%', '')) / 100) *\n this.viewport[axis]\n } else if (typeof this.options.distanceThreshold === 'number') {\n distanceThreshold = this.options.distanceThreshold\n } else {\n distanceThreshold = this.viewport[axis]\n }\n\n return distanceThreshold\n }\n\n private onSnap = (e: VirtualScrollData) => {\n if (this.isStopped) return\n\n if (e.event.type === 'touchmove') return\n\n if (\n this.options.type === 'lock' &&\n this.lenis.userData?.initiator === 'snap'\n )\n return\n\n let { scroll, isHorizontal } = this.lenis\n const delta = isHorizontal ? e.deltaX : e.deltaY\n scroll = Math.ceil(this.lenis.scroll + delta)\n\n const snaps = this.computeSnaps()\n\n if (snaps.length === 0) return\n\n let snapIndex: number | undefined\n\n const prevSnapIndex = snaps.findLastIndex(({ value }) => value < scroll)\n const nextSnapIndex = snaps.findIndex(({ value }) => value > scroll)\n\n if (this.options.type === 'lock') {\n if (delta > 0) {\n snapIndex = nextSnapIndex\n } else if (delta < 0) {\n snapIndex = prevSnapIndex\n }\n } else {\n const prevSnap = snaps[prevSnapIndex]!\n const distanceToPrevSnap = prevSnap\n ? Math.abs(scroll - prevSnap.value)\n : Number.POSITIVE_INFINITY\n\n const nextSnap = snaps[nextSnapIndex]!\n const distanceToNextSnap = nextSnap\n ? Math.abs(scroll - nextSnap.value)\n : Number.POSITIVE_INFINITY\n snapIndex =\n distanceToPrevSnap < distanceToNextSnap ? prevSnapIndex : nextSnapIndex\n }\n\n if (snapIndex === undefined) return\n if (snapIndex === -1) return\n\n snapIndex = Math.max(0, Math.min(snapIndex, snaps.length - 1))\n\n const snap = snaps[snapIndex]!\n\n const distance = Math.abs(scroll - snap.value)\n\n if (distance <= this.distanceThreshold) {\n this.goTo(snapIndex)\n }\n }\n\n resize() {\n this.elements.forEach((element) => {\n element.onWrapperResize()\n })\n }\n}\n","// This file serves as an entry point for the package\nimport { Snap } from './src/snap'\n\n// @ts-expect-error\nglobalThis.Snap = Snap\n"],"mappings":"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","names":["align","index"]}
|
package/dist/lenis-snap.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e,t){let i;return function(...s){
|
|
1
|
+
function e(e,t){let i;return function(...s){clearTimeout(i),i=setTimeout(()=>{i=void 0,e.apply(this,s)},t)}}function t(e){"sticky"===getComputedStyle(e).position&&(e.style.setProperty("position","static"),e.dataset.sticky="true"),e.offsetParent&&t(e.offsetParent)}function i(e){"true"===e?.dataset?.sticky&&(e.style.removeProperty("position"),delete e.dataset.sticky),e.offsetParent&&i(e.offsetParent)}function s(e,t=0){const i=t+e.offsetTop;return e.offsetParent?s(e.offsetParent,i):i}function n(e,t=0){const i=t+e.offsetLeft;return e.offsetParent?n(e.offsetParent,i):i}function o(e,t=0){const i=t+e.scrollTop;return e.offsetParent?o(e.offsetParent,i):i+window.scrollY}function r(e,t=0){const i=t+e.scrollLeft;return e.offsetParent?r(e.offsetParent,i):i+window.scrollX}var h=class{element;options;align;rect={};wrapperResizeObserver;resizeObserver;debouncedWrapperResize;constructor(t,{align:i=["start"],ignoreSticky:s=!0,ignoreTransform:n=!1}={}){this.element=t,this.options={align:i,ignoreSticky:s,ignoreTransform:n},this.align=[i].flat(),this.debouncedWrapperResize=e(this.onWrapperResize,500),this.wrapperResizeObserver=new ResizeObserver(this.debouncedWrapperResize),this.wrapperResizeObserver.observe(document.body),this.onWrapperResize(),this.resizeObserver=new ResizeObserver(this.onResize),this.resizeObserver.observe(this.element),this.setRect({width:this.element.offsetWidth,height:this.element.offsetHeight})}destroy(){this.wrapperResizeObserver.disconnect(),this.resizeObserver.disconnect()}setRect({top:e,left:t,width:i,height:s,element:n}={}){e=e??this.rect.top,t=t??this.rect.left,i=i??this.rect.width,s=s??this.rect.height,n=n??this.rect.element,e===this.rect.top&&t===this.rect.left&&i===this.rect.width&&s===this.rect.height&&n===this.rect.element||(this.rect.top=e,this.rect.y=e,this.rect.width=i,this.rect.height=s,this.rect.left=t,this.rect.x=t,this.rect.bottom=e+s,this.rect.right=t+i)}onWrapperResize=()=>{let e,h;if(this.options.ignoreSticky&&t(this.element),this.options.ignoreTransform)e=s(this.element),h=n(this.element);else{const t=this.element.getBoundingClientRect();e=t.top+o(this.element),h=t.left+r(this.element)}this.options.ignoreSticky&&i(this.element),this.setRect({top:e,left:h})};onResize=([e])=>{if(!e?.borderBoxSize[0])return;const t=e.borderBoxSize[0].inlineSize,i=e.borderBoxSize[0].blockSize;this.setRect({width:t,height:i})}},a=0;function p(){return a++}globalThis.Snap=class{constructor(t,{type:i="proximity",lerp:s,easing:n,duration:o,distanceThreshold:r="50%",debounce:h=500,onSnapStart:a,onSnapComplete:p}={}){this.lenis=t,this.options={type:i,lerp:s,easing:n,duration:o,distanceThreshold:r,debounce:h,onSnapStart:a,onSnapComplete:p},this.onWindowResize(),window.addEventListener("resize",this.onWindowResize,!1),this.onSnapDebounced=e(this.onSnap,this.options.debounce),this.lenis.on("virtual-scroll",this.onSnapDebounced)}options;elements=new Map;snaps=new Map;viewport={width:window.innerWidth,height:window.innerHeight};isStopped=!1;onSnapDebounced;currentSnapIndex;destroy(){this.lenis.off("virtual-scroll",this.onSnapDebounced),window.removeEventListener("resize",this.onWindowResize,!1),this.elements.forEach(e=>{e.destroy()})}start(){this.isStopped=!1}stop(){this.isStopped=!0}add(e){const t=p();return this.snaps.set(t,{value:e}),()=>this.snaps.delete(t)}addElement(e,t={}){const i=p();return this.elements.set(i,new h(e,t)),()=>this.elements.delete(i)}addElements(e,t={}){const i=[...e].map(e=>this.addElement(e,t));return()=>{i.forEach(e=>{e()})}}onWindowResize=()=>{this.viewport.width=window.innerWidth,this.viewport.height=window.innerHeight};computeSnaps=()=>{const{isHorizontal:e}=this.lenis;let t=[...this.snaps.values()];return this.elements.forEach(({rect:i,align:s})=>{let n;s.forEach(s=>{"start"===s?n=i.top:"center"===s?n=e?i.left+i.width/2-this.viewport.width/2:i.top+i.height/2-this.viewport.height/2:"end"===s&&(n=e?i.left+i.width-this.viewport.width:i.top+i.height-this.viewport.height),"number"==typeof n&&t.push({value:Math.ceil(n)})})}),t=t.sort((e,t)=>Math.abs(e.value)-Math.abs(t.value)),t};previous(){this.goTo((this.currentSnapIndex??0)-1)}next(){this.goTo((this.currentSnapIndex??0)+1)}goTo(e){const t=this.computeSnaps();if(0===t.length)return;this.currentSnapIndex=Math.max(0,Math.min(e,t.length-1));const i=t[this.currentSnapIndex];void 0!==i&&this.lenis.scrollTo(i.value,{duration:this.options.duration,easing:this.options.easing,lerp:this.options.lerp,lock:"lock"===this.options.type,userData:{initiator:"snap"},onStart:()=>{this.options.onSnapStart?.({index:this.currentSnapIndex,...i})},onComplete:()=>{this.options.onSnapComplete?.({index:this.currentSnapIndex,...i})}})}get distanceThreshold(){let e=Number.POSITIVE_INFINITY;if("mandatory"===this.options.type)return Number.POSITIVE_INFINITY;const{isHorizontal:t}=this.lenis,i=t?"width":"height";return e="string"==typeof this.options.distanceThreshold&&this.options.distanceThreshold.endsWith("%")?Number(this.options.distanceThreshold.replace("%",""))/100*this.viewport[i]:"number"==typeof this.options.distanceThreshold?this.options.distanceThreshold:this.viewport[i],e}onSnap=e=>{if(this.isStopped)return;if("touchmove"===e.event.type)return;if("lock"===this.options.type&&"snap"===this.lenis.userData?.initiator)return;let{scroll:t,isHorizontal:i}=this.lenis;const s=i?e.deltaX:e.deltaY;t=Math.ceil(this.lenis.scroll+s);const n=this.computeSnaps();if(0===n.length)return;let o;const r=n.findLastIndex(({value:e})=>e<t),h=n.findIndex(({value:e})=>e>t);if("lock"===this.options.type)s>0?o=h:s<0&&(o=r);else{const e=n[r],i=e?Math.abs(t-e.value):Number.POSITIVE_INFINITY,s=n[h];o=i<(s?Math.abs(t-s.value):Number.POSITIVE_INFINITY)?r:h}if(void 0===o)return;if(-1===o)return;o=Math.max(0,Math.min(o,n.length-1));const a=n[o];Math.abs(t-a.value)<=this.distanceThreshold&&this.goTo(o)};resize(){this.elements.forEach(e=>{e.onWrapperResize()})}};//# sourceMappingURL=lenis-snap.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../packages/snap/src/debounce.ts","../packages/snap/src/element.ts","../packages/snap/src/uid.ts","../packages/snap/src/snap.ts","../packages/snap/browser.ts"],"sourcesContent":["export function debounce<CB extends (...args: any[]) => void>(\r\n callback: CB,\r\n delay: number\r\n) {\r\n let timer: ReturnType<typeof setTimeout> | undefined\r\n return function <T>(this: T, ...args: Parameters<typeof callback>): void {\r\n let context = this\r\n clearTimeout(timer)\r\n timer = setTimeout(() => {\r\n timer = undefined\r\n callback.apply(context, args)\r\n }, delay)\r\n }\r\n}\r\n","import { debounce } from './debounce'\r\n\r\nfunction removeParentSticky(element: HTMLElement) {\r\n const position = getComputedStyle(element).position\r\n\r\n const isSticky = position === 'sticky'\r\n\r\n if (isSticky) {\r\n element.style.setProperty('position', 'static')\r\n element.dataset.sticky = 'true'\r\n }\r\n\r\n if (element.offsetParent) {\r\n removeParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction addParentSticky(element: HTMLElement) {\r\n if (element?.dataset?.sticky === 'true') {\r\n element.style.removeProperty('position')\r\n delete element.dataset.sticky\r\n }\r\n\r\n if (element.offsetParent) {\r\n addParentSticky(element.offsetParent as HTMLElement)\r\n }\r\n}\r\n\r\nfunction offsetTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.offsetTop\r\n if (element.offsetParent) {\r\n return offsetTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top\r\n}\r\n\r\nfunction offsetLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.offsetLeft\r\n if (element.offsetParent) {\r\n return offsetLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left\r\n}\r\n\r\nfunction scrollTop(element: HTMLElement, accumulator = 0) {\r\n const top = accumulator + element.scrollTop\r\n if (element.offsetParent) {\r\n return scrollTop(element.offsetParent as HTMLElement, top)\r\n }\r\n return top + window.scrollY\r\n}\r\n\r\nfunction scrollLeft(element: HTMLElement, accumulator = 0) {\r\n const left = accumulator + element.scrollLeft\r\n if (element.offsetParent) {\r\n return scrollLeft(element.offsetParent as HTMLElement, left)\r\n }\r\n return left + window.scrollX\r\n}\r\n\r\nexport type SnapElementOptions = {\r\n align?: string | string[]\r\n ignoreSticky?: boolean\r\n ignoreTransform?: boolean\r\n}\r\n\r\ntype Rect = {\r\n top: number\r\n left: number\r\n width: number\r\n height: number\r\n x: number\r\n y: number\r\n bottom: number\r\n right: number\r\n element: HTMLElement\r\n}\r\n\r\nexport class SnapElement {\r\n element: HTMLElement\r\n options: SnapElementOptions\r\n align: string[]\r\n // @ts-ignore\r\n rect: Rect = {}\r\n wrapperResizeObserver: ResizeObserver\r\n resizeObserver: ResizeObserver\r\n debouncedWrapperResize: () => void\r\n\r\n constructor(\r\n element: HTMLElement,\r\n {\r\n align = ['start'],\r\n ignoreSticky = true,\r\n ignoreTransform = false,\r\n }: SnapElementOptions = {}\r\n ) {\r\n this.element = element\r\n\r\n this.options = { align, ignoreSticky, ignoreTransform }\r\n\r\n this.align = [align].flat()\r\n\r\n this.debouncedWrapperResize = debounce(this.onWrapperResize, 500)\r\n\r\n this.wrapperResizeObserver = new ResizeObserver(this.debouncedWrapperResize)\r\n this.wrapperResizeObserver.observe(document.body)\r\n this.onWrapperResize()\r\n\r\n this.resizeObserver = new ResizeObserver(this.onResize)\r\n this.resizeObserver.observe(this.element)\r\n this.setRect({\r\n width: this.element.offsetWidth,\r\n height: this.element.offsetHeight,\r\n })\r\n }\r\n\r\n destroy() {\r\n this.wrapperResizeObserver.disconnect()\r\n this.resizeObserver.disconnect()\r\n }\r\n\r\n setRect({\r\n top,\r\n left,\r\n width,\r\n height,\r\n element,\r\n }: {\r\n top?: number\r\n left?: number\r\n width?: number\r\n height?: number\r\n element?: HTMLElement\r\n } = {}) {\r\n top = top ?? this.rect.top\r\n left = left ?? this.rect.left\r\n width = width ?? this.rect.width\r\n height = height ?? this.rect.height\r\n element = element ?? this.rect.element\r\n\r\n if (\r\n top === this.rect.top &&\r\n left === this.rect.left &&\r\n width === this.rect.width &&\r\n height === this.rect.height &&\r\n element === this.rect.element\r\n )\r\n return\r\n\r\n this.rect.top = top\r\n this.rect.y = top\r\n this.rect.width = width\r\n this.rect.height = height\r\n this.rect.left = left\r\n this.rect.x = left\r\n this.rect.bottom = top + height\r\n this.rect.right = left + width\r\n }\r\n\r\n onWrapperResize = () => {\r\n let top, left\r\n\r\n if (this.options.ignoreSticky) removeParentSticky(this.element)\r\n if (this.options.ignoreTransform) {\r\n top = offsetTop(this.element)\r\n left = offsetLeft(this.element)\r\n } else {\r\n const rect = this.element.getBoundingClientRect()\r\n top = rect.top + scrollTop(this.element)\r\n left = rect.left + scrollLeft(this.element)\r\n }\r\n if (this.options.ignoreSticky) addParentSticky(this.element)\r\n\r\n this.setRect({ top, left })\r\n }\r\n\r\n onResize = ([entry]: ResizeObserverEntry[]) => {\r\n if (!entry?.borderBoxSize[0]) return\r\n const width = entry.borderBoxSize[0].inlineSize\r\n const height = entry.borderBoxSize[0].blockSize\r\n\r\n this.setRect({ width, height })\r\n }\r\n}\r\n","let index = 0\n\nexport type UID = number\n\nexport function uid(): UID {\n return index++\n}\n","import type Lenis from 'lenis'\r\nimport type { VirtualScrollData } from 'lenis'\r\nimport { debounce } from './debounce'\r\nimport type { SnapElementOptions } from './element'\r\nimport { SnapElement } from './element'\r\nimport type { SnapItem, SnapOptions } from './types'\r\nimport type { UID } from './uid'\r\nimport { uid } from './uid'\r\n\r\n// TODO:\r\n// - fix wheel scrolling after limits (see console scroll to)\r\n// - arrow, spacebar\r\n\r\ntype RequiredPick<T, F extends keyof T> = Omit<T, F> & Required<Pick<T, F>>\r\n\r\n/**\r\n * Snap class to handle the snap functionality\r\n *\r\n * @example\r\n * const snap = new Snap(lenis, {\r\n * type: 'mandatory', // 'mandatory', 'proximity' or 'lock'\r\n * onSnapStart: (snap) => {\r\n * console.log('onSnapStart', snap)\r\n * },\r\n * onSnapComplete: (snap) => {\r\n * console.log('onSnapComplete', snap)\r\n * },\r\n * })\r\n *\r\n * snap.add(500) // snap at 500px\r\n *\r\n * const removeSnap = snap.add(500)\r\n *\r\n * if (someCondition) {\r\n * removeSnap()\r\n * }\r\n */\r\nexport class Snap {\r\n options: RequiredPick<SnapOptions, 'type' | 'debounce'>\r\n elements = new Map<UID, SnapElement>()\r\n snaps = new Map<UID, SnapItem>()\r\n viewport: { width: number; height: number } = {\r\n width: window.innerWidth,\r\n height: window.innerHeight,\r\n }\r\n isStopped = false\r\n onSnapDebounced: (e: VirtualScrollData) => void\r\n currentSnapIndex?: number\r\n\r\n constructor(\r\n private lenis: Lenis,\r\n {\r\n type = 'proximity',\r\n lerp,\r\n easing,\r\n duration,\r\n distanceThreshold = '50%', // useless when type is \"mandatory\"\r\n debounce: debounceDelay = 500,\r\n onSnapStart,\r\n onSnapComplete,\r\n }: SnapOptions = {}\r\n ) {\r\n this.options = {\r\n type,\r\n lerp,\r\n easing,\r\n duration,\r\n distanceThreshold,\r\n debounce: debounceDelay,\r\n onSnapStart,\r\n onSnapComplete,\r\n }\r\n\r\n this.onWindowResize()\r\n window.addEventListener('resize', this.onWindowResize, false)\r\n\r\n this.onSnapDebounced = debounce(this.onSnap, this.options.debounce)\r\n\r\n this.lenis.on('virtual-scroll', this.onSnapDebounced)\r\n }\r\n\r\n /**\r\n * Destroy the snap instance\r\n */\r\n destroy() {\r\n this.lenis.off('virtual-scroll', this.onSnapDebounced)\r\n window.removeEventListener('resize', this.onWindowResize, false)\r\n this.elements.forEach((element) => {\r\n element.destroy()\r\n })\r\n }\r\n\r\n /**\r\n * Start the snap after it has been stopped\r\n */\r\n start() {\r\n this.isStopped = false\r\n }\r\n\r\n /**\r\n * Stop the snap\r\n */\r\n stop() {\r\n this.isStopped = true\r\n }\r\n\r\n /**\r\n * Add a snap to the snap instance\r\n *\r\n * @param value The value to snap to\r\n * @param userData User data that will be forwarded through the snap event\r\n * @returns Unsubscribe function\r\n */\r\n add(value: number): () => void {\r\n const id = uid()\r\n\r\n this.snaps.set(id, { value })\r\n\r\n return () => this.snaps.delete(id)\r\n }\r\n\r\n /**\r\n * Add an element to the snap instance\r\n *\r\n * @param element The element to add\r\n * @param options The options for the element\r\n * @returns Unsubscribe function\r\n */\r\n addElement(\r\n element: HTMLElement,\r\n options: SnapElementOptions = {}\r\n ): () => void {\r\n const id = uid()\r\n\r\n this.elements.set(id, new SnapElement(element, options))\r\n\r\n return () => this.elements.delete(id)\r\n }\r\n\r\n addElements(\r\n elements: HTMLElement[],\r\n options: SnapElementOptions = {}\r\n ): () => void {\r\n const map = [...elements].map((element) =>\r\n this.addElement(element, options)\r\n )\r\n return () => {\r\n map.forEach((remove) => {\r\n remove()\r\n })\r\n }\r\n }\r\n\r\n private onWindowResize = () => {\r\n this.viewport.width = window.innerWidth\r\n this.viewport.height = window.innerHeight\r\n }\r\n\r\n private computeSnaps = () => {\r\n const { isHorizontal } = this.lenis\r\n\r\n let snaps = [...this.snaps.values()] as SnapItem[]\r\n\r\n this.elements.forEach(({ rect, align }) => {\r\n let value: number | undefined\r\n\r\n align.forEach((align) => {\r\n if (align === 'start') {\r\n value = rect.top\r\n } else if (align === 'center') {\r\n value = isHorizontal\r\n ? rect.left + rect.width / 2 - this.viewport.width / 2\r\n : rect.top + rect.height / 2 - this.viewport.height / 2\r\n } else if (align === 'end') {\r\n value = isHorizontal\r\n ? rect.left + rect.width - this.viewport.width\r\n : rect.top + rect.height - this.viewport.height\r\n }\r\n\r\n if (typeof value === 'number') {\r\n snaps.push({ value: Math.ceil(value) })\r\n }\r\n })\r\n })\r\n\r\n snaps = snaps.sort((a, b) => Math.abs(a.value) - Math.abs(b.value))\r\n\r\n return snaps\r\n }\r\n\r\n previous() {\r\n this.goTo((this.currentSnapIndex ?? 0) - 1)\r\n }\r\n\r\n next() {\r\n this.goTo((this.currentSnapIndex ?? 0) + 1)\r\n }\r\n\r\n goTo(index: number) {\r\n const snaps = this.computeSnaps()\r\n\r\n if (snaps.length === 0) return\r\n\r\n this.currentSnapIndex = Math.max(0, Math.min(index, snaps.length - 1))\r\n\r\n const currentSnap = snaps[this.currentSnapIndex]\r\n if (currentSnap === undefined) return\r\n\r\n this.lenis.scrollTo(currentSnap.value, {\r\n duration: this.options.duration,\r\n easing: this.options.easing,\r\n lerp: this.options.lerp,\r\n lock: this.options.type === 'lock',\r\n userData: { initiator: 'snap' },\r\n onStart: () => {\r\n this.options.onSnapStart?.({\r\n index: this.currentSnapIndex,\r\n ...currentSnap,\r\n })\r\n },\r\n onComplete: () => {\r\n this.options.onSnapComplete?.({\r\n index: this.currentSnapIndex,\r\n ...currentSnap,\r\n })\r\n },\r\n })\r\n }\r\n\r\n get distanceThreshold() {\r\n let distanceThreshold = Infinity\r\n if (this.options.type === 'mandatory') return Infinity\r\n\r\n const { isHorizontal } = this.lenis\r\n\r\n const axis = isHorizontal ? 'width' : 'height'\r\n\r\n if (\r\n typeof this.options.distanceThreshold === 'string' &&\r\n this.options.distanceThreshold.endsWith('%')\r\n ) {\r\n distanceThreshold =\r\n (Number(this.options.distanceThreshold.replace('%', '')) / 100) *\r\n this.viewport[axis]\r\n } else if (typeof this.options.distanceThreshold === 'number') {\r\n distanceThreshold = this.options.distanceThreshold\r\n } else {\r\n distanceThreshold = this.viewport[axis]\r\n }\r\n\r\n return distanceThreshold\r\n }\r\n\r\n private onSnap = (e: VirtualScrollData) => {\r\n if (this.isStopped) return\r\n\r\n if (e.event.type === 'touchmove') return\r\n\r\n if (\r\n this.options.type === 'lock' &&\r\n this.lenis.userData?.initiator === 'snap'\r\n )\r\n return\r\n\r\n let { scroll, isHorizontal } = this.lenis\r\n const delta = isHorizontal ? e.deltaX : e.deltaY\r\n scroll = Math.ceil(this.lenis.scroll + delta)\r\n\r\n const snaps = this.computeSnaps()\r\n\r\n if (snaps.length === 0) return\r\n\r\n let snapIndex\r\n\r\n const prevSnapIndex = snaps.findLastIndex(({ value }) => value < scroll)\r\n const nextSnapIndex = snaps.findIndex(({ value }) => value > scroll)\r\n\r\n if (this.options.type === 'lock') {\r\n if (delta > 0) {\r\n snapIndex = nextSnapIndex\r\n } else if (delta < 0) {\r\n snapIndex = prevSnapIndex\r\n }\r\n } else {\r\n const prevSnap = snaps[prevSnapIndex]!\r\n const distanceToPrevSnap = prevSnap\r\n ? Math.abs(scroll - prevSnap.value)\r\n : Infinity\r\n\r\n const nextSnap = snaps[nextSnapIndex]!\r\n const distanceToNextSnap = nextSnap\r\n ? Math.abs(scroll - nextSnap.value)\r\n : Infinity\r\n snapIndex =\r\n distanceToPrevSnap < distanceToNextSnap ? prevSnapIndex : nextSnapIndex\r\n }\r\n\r\n if (snapIndex === undefined) return\r\n if (snapIndex === -1) return\r\n\r\n snapIndex = Math.max(0, Math.min(snapIndex, snaps.length - 1))\r\n\r\n const snap = snaps[snapIndex]!\r\n\r\n const distance = Math.abs(scroll - snap.value)\r\n\r\n if (distance <= this.distanceThreshold) {\r\n this.goTo(snapIndex)\r\n }\r\n }\r\n\r\n resize() {\r\n this.elements.forEach((element) => element.onWrapperResize())\r\n }\r\n}\r\n","// This file serves as an entry point for the package\nimport { Snap } from './src/snap'\nglobalThis.Snap = Snap\n"],"mappings":"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","names":["align","index"]}
|
|
1
|
+
{"version":3,"sources":["../packages/snap/src/debounce.ts","../packages/snap/src/element.ts","../packages/snap/src/uid.ts","../packages/snap/src/snap.ts","../packages/snap/browser.ts"],"sourcesContent":["export function debounce<CB extends (...args: unknown[]) => void>(\n callback: CB,\n delay: number\n) {\n let timer: ReturnType<typeof setTimeout> | undefined\n return function <T>(this: T, ...args: Parameters<typeof callback>): void {\n clearTimeout(timer)\n timer = setTimeout(() => {\n timer = undefined\n callback.apply(this, args)\n }, delay)\n }\n}\n","import { debounce } from './debounce'\n\nfunction removeParentSticky(element: HTMLElement) {\n const position = getComputedStyle(element).position\n\n const isSticky = position === 'sticky'\n\n if (isSticky) {\n element.style.setProperty('position', 'static')\n element.dataset.sticky = 'true'\n }\n\n if (element.offsetParent) {\n removeParentSticky(element.offsetParent as HTMLElement)\n }\n}\n\nfunction addParentSticky(element: HTMLElement) {\n if (element?.dataset?.sticky === 'true') {\n element.style.removeProperty('position')\n delete element.dataset.sticky\n }\n\n if (element.offsetParent) {\n addParentSticky(element.offsetParent as HTMLElement)\n }\n}\n\nfunction offsetTop(element: HTMLElement, accumulator = 0) {\n const top = accumulator + element.offsetTop\n if (element.offsetParent) {\n return offsetTop(element.offsetParent as HTMLElement, top)\n }\n return top\n}\n\nfunction offsetLeft(element: HTMLElement, accumulator = 0) {\n const left = accumulator + element.offsetLeft\n if (element.offsetParent) {\n return offsetLeft(element.offsetParent as HTMLElement, left)\n }\n return left\n}\n\nfunction scrollTop(element: HTMLElement, accumulator = 0) {\n const top = accumulator + element.scrollTop\n if (element.offsetParent) {\n return scrollTop(element.offsetParent as HTMLElement, top)\n }\n return top + window.scrollY\n}\n\nfunction scrollLeft(element: HTMLElement, accumulator = 0) {\n const left = accumulator + element.scrollLeft\n if (element.offsetParent) {\n return scrollLeft(element.offsetParent as HTMLElement, left)\n }\n return left + window.scrollX\n}\n\nexport type SnapElementOptions = {\n align?: string | string[]\n ignoreSticky?: boolean\n ignoreTransform?: boolean\n}\n\ntype Rect = {\n top: number\n left: number\n width: number\n height: number\n x: number\n y: number\n bottom: number\n right: number\n element: HTMLElement\n}\n\nexport class SnapElement {\n element: HTMLElement\n options: SnapElementOptions\n align: string[]\n // @ts-expect-error\n rect: Rect = {}\n wrapperResizeObserver: ResizeObserver\n resizeObserver: ResizeObserver\n debouncedWrapperResize: () => void\n\n constructor(\n element: HTMLElement,\n {\n align = ['start'],\n ignoreSticky = true,\n ignoreTransform = false,\n }: SnapElementOptions = {}\n ) {\n this.element = element\n\n this.options = { align, ignoreSticky, ignoreTransform }\n\n this.align = [align].flat()\n\n this.debouncedWrapperResize = debounce(this.onWrapperResize, 500)\n\n this.wrapperResizeObserver = new ResizeObserver(this.debouncedWrapperResize)\n this.wrapperResizeObserver.observe(document.body)\n this.onWrapperResize()\n\n this.resizeObserver = new ResizeObserver(this.onResize)\n this.resizeObserver.observe(this.element)\n this.setRect({\n width: this.element.offsetWidth,\n height: this.element.offsetHeight,\n })\n }\n\n destroy() {\n this.wrapperResizeObserver.disconnect()\n this.resizeObserver.disconnect()\n }\n\n setRect({\n top,\n left,\n width,\n height,\n element,\n }: {\n top?: number\n left?: number\n width?: number\n height?: number\n element?: HTMLElement\n } = {}) {\n top = top ?? this.rect.top\n left = left ?? this.rect.left\n width = width ?? this.rect.width\n height = height ?? this.rect.height\n element = element ?? this.rect.element\n\n if (\n top === this.rect.top &&\n left === this.rect.left &&\n width === this.rect.width &&\n height === this.rect.height &&\n element === this.rect.element\n )\n return\n\n this.rect.top = top\n this.rect.y = top\n this.rect.width = width\n this.rect.height = height\n this.rect.left = left\n this.rect.x = left\n this.rect.bottom = top + height\n this.rect.right = left + width\n }\n\n onWrapperResize = () => {\n let top: number | undefined\n let left: number | undefined\n\n if (this.options.ignoreSticky) removeParentSticky(this.element)\n if (this.options.ignoreTransform) {\n top = offsetTop(this.element)\n left = offsetLeft(this.element)\n } else {\n const rect = this.element.getBoundingClientRect()\n top = rect.top + scrollTop(this.element)\n left = rect.left + scrollLeft(this.element)\n }\n if (this.options.ignoreSticky) addParentSticky(this.element)\n\n this.setRect({ top, left })\n }\n\n onResize = ([entry]: ResizeObserverEntry[]) => {\n if (!entry?.borderBoxSize[0]) return\n const width = entry.borderBoxSize[0].inlineSize\n const height = entry.borderBoxSize[0].blockSize\n\n this.setRect({ width, height })\n }\n}\n","let index = 0\n\nexport type UID = number\n\nexport function uid(): UID {\n return index++\n}\n","import type Lenis from 'lenis'\nimport type { VirtualScrollData } from 'lenis'\nimport { debounce } from './debounce'\nimport type { SnapElementOptions } from './element'\nimport { SnapElement } from './element'\nimport type { SnapItem, SnapOptions } from './types'\nimport type { UID } from './uid'\nimport { uid } from './uid'\n\n// TODO:\n// - fix wheel scrolling after limits (see console scroll to)\n// - arrow, spacebar\n\ntype RequiredPick<T, F extends keyof T> = Omit<T, F> & Required<Pick<T, F>>\n\n/**\n * Snap class to handle the snap functionality\n *\n * @example\n * const snap = new Snap(lenis, {\n * type: 'mandatory', // 'mandatory', 'proximity' or 'lock'\n * onSnapStart: (snap) => {\n * console.log('onSnapStart', snap)\n * },\n * onSnapComplete: (snap) => {\n * console.log('onSnapComplete', snap)\n * },\n * })\n *\n * snap.add(500) // snap at 500px\n *\n * const removeSnap = snap.add(500)\n *\n * if (someCondition) {\n * removeSnap()\n * }\n */\nexport class Snap {\n options: RequiredPick<SnapOptions, 'type' | 'debounce'>\n elements = new Map<UID, SnapElement>()\n snaps = new Map<UID, SnapItem>()\n viewport: { width: number; height: number } = {\n width: window.innerWidth,\n height: window.innerHeight,\n }\n isStopped = false\n onSnapDebounced: (e: VirtualScrollData) => void\n currentSnapIndex?: number\n\n constructor(\n private lenis: Lenis,\n {\n type = 'proximity',\n lerp,\n easing,\n duration,\n distanceThreshold = '50%', // useless when type is \"mandatory\"\n debounce: debounceDelay = 500,\n onSnapStart,\n onSnapComplete,\n }: SnapOptions = {}\n ) {\n this.options = {\n type,\n lerp,\n easing,\n duration,\n distanceThreshold,\n debounce: debounceDelay,\n onSnapStart,\n onSnapComplete,\n }\n\n this.onWindowResize()\n window.addEventListener('resize', this.onWindowResize, false)\n\n this.onSnapDebounced = debounce(\n this.onSnap as (...args: unknown[]) => void,\n this.options.debounce\n )\n\n this.lenis.on('virtual-scroll', this.onSnapDebounced)\n }\n\n /**\n * Destroy the snap instance\n */\n destroy() {\n this.lenis.off('virtual-scroll', this.onSnapDebounced)\n window.removeEventListener('resize', this.onWindowResize, false)\n this.elements.forEach((element) => {\n element.destroy()\n })\n }\n\n /**\n * Start the snap after it has been stopped\n */\n start() {\n this.isStopped = false\n }\n\n /**\n * Stop the snap\n */\n stop() {\n this.isStopped = true\n }\n\n /**\n * Add a snap to the snap instance\n *\n * @param value The value to snap to\n * @param userData User data that will be forwarded through the snap event\n * @returns Unsubscribe function\n */\n add(value: number): () => void {\n const id = uid()\n\n this.snaps.set(id, { value })\n\n return () => this.snaps.delete(id)\n }\n\n /**\n * Add an element to the snap instance\n *\n * @param element The element to add\n * @param options The options for the element\n * @returns Unsubscribe function\n */\n addElement(\n element: HTMLElement,\n options: SnapElementOptions = {}\n ): () => void {\n const id = uid()\n\n this.elements.set(id, new SnapElement(element, options))\n\n return () => this.elements.delete(id)\n }\n\n addElements(\n elements: HTMLElement[],\n options: SnapElementOptions = {}\n ): () => void {\n const map = [...elements].map((element) =>\n this.addElement(element, options)\n )\n return () => {\n map.forEach((remove) => {\n remove()\n })\n }\n }\n\n private onWindowResize = () => {\n this.viewport.width = window.innerWidth\n this.viewport.height = window.innerHeight\n }\n\n private computeSnaps = () => {\n const { isHorizontal } = this.lenis\n\n let snaps = [...this.snaps.values()] as SnapItem[]\n\n this.elements.forEach(({ rect, align }) => {\n let value: number | undefined\n\n align.forEach((align) => {\n if (align === 'start') {\n value = rect.top\n } else if (align === 'center') {\n value = isHorizontal\n ? rect.left + rect.width / 2 - this.viewport.width / 2\n : rect.top + rect.height / 2 - this.viewport.height / 2\n } else if (align === 'end') {\n value = isHorizontal\n ? rect.left + rect.width - this.viewport.width\n : rect.top + rect.height - this.viewport.height\n }\n\n if (typeof value === 'number') {\n snaps.push({ value: Math.ceil(value) })\n }\n })\n })\n\n snaps = snaps.sort((a, b) => Math.abs(a.value) - Math.abs(b.value))\n\n return snaps\n }\n\n previous() {\n this.goTo((this.currentSnapIndex ?? 0) - 1)\n }\n\n next() {\n this.goTo((this.currentSnapIndex ?? 0) + 1)\n }\n\n goTo(index: number) {\n const snaps = this.computeSnaps()\n\n if (snaps.length === 0) return\n\n this.currentSnapIndex = Math.max(0, Math.min(index, snaps.length - 1))\n\n const currentSnap = snaps[this.currentSnapIndex]\n if (currentSnap === undefined) return\n\n this.lenis.scrollTo(currentSnap.value, {\n duration: this.options.duration,\n easing: this.options.easing,\n lerp: this.options.lerp,\n lock: this.options.type === 'lock',\n userData: { initiator: 'snap' },\n onStart: () => {\n this.options.onSnapStart?.({\n index: this.currentSnapIndex,\n ...currentSnap,\n })\n },\n onComplete: () => {\n this.options.onSnapComplete?.({\n index: this.currentSnapIndex,\n ...currentSnap,\n })\n },\n })\n }\n\n get distanceThreshold() {\n let distanceThreshold = Number.POSITIVE_INFINITY\n if (this.options.type === 'mandatory') return Number.POSITIVE_INFINITY\n\n const { isHorizontal } = this.lenis\n\n const axis = isHorizontal ? 'width' : 'height'\n\n if (\n typeof this.options.distanceThreshold === 'string' &&\n this.options.distanceThreshold.endsWith('%')\n ) {\n distanceThreshold =\n (Number(this.options.distanceThreshold.replace('%', '')) / 100) *\n this.viewport[axis]\n } else if (typeof this.options.distanceThreshold === 'number') {\n distanceThreshold = this.options.distanceThreshold\n } else {\n distanceThreshold = this.viewport[axis]\n }\n\n return distanceThreshold\n }\n\n private onSnap = (e: VirtualScrollData) => {\n if (this.isStopped) return\n\n if (e.event.type === 'touchmove') return\n\n if (\n this.options.type === 'lock' &&\n this.lenis.userData?.initiator === 'snap'\n )\n return\n\n let { scroll, isHorizontal } = this.lenis\n const delta = isHorizontal ? e.deltaX : e.deltaY\n scroll = Math.ceil(this.lenis.scroll + delta)\n\n const snaps = this.computeSnaps()\n\n if (snaps.length === 0) return\n\n let snapIndex: number | undefined\n\n const prevSnapIndex = snaps.findLastIndex(({ value }) => value < scroll)\n const nextSnapIndex = snaps.findIndex(({ value }) => value > scroll)\n\n if (this.options.type === 'lock') {\n if (delta > 0) {\n snapIndex = nextSnapIndex\n } else if (delta < 0) {\n snapIndex = prevSnapIndex\n }\n } else {\n const prevSnap = snaps[prevSnapIndex]!\n const distanceToPrevSnap = prevSnap\n ? Math.abs(scroll - prevSnap.value)\n : Number.POSITIVE_INFINITY\n\n const nextSnap = snaps[nextSnapIndex]!\n const distanceToNextSnap = nextSnap\n ? Math.abs(scroll - nextSnap.value)\n : Number.POSITIVE_INFINITY\n snapIndex =\n distanceToPrevSnap < distanceToNextSnap ? prevSnapIndex : nextSnapIndex\n }\n\n if (snapIndex === undefined) return\n if (snapIndex === -1) return\n\n snapIndex = Math.max(0, Math.min(snapIndex, snaps.length - 1))\n\n const snap = snaps[snapIndex]!\n\n const distance = Math.abs(scroll - snap.value)\n\n if (distance <= this.distanceThreshold) {\n this.goTo(snapIndex)\n }\n }\n\n resize() {\n this.elements.forEach((element) => {\n element.onWrapperResize()\n })\n }\n}\n","// This file serves as an entry point for the package\nimport { Snap } from './src/snap'\n\n// @ts-expect-error\nglobalThis.Snap = Snap\n"],"mappings":"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","names":["align","index"]}
|
package/dist/lenis-snap.mjs
CHANGED
|
@@ -2,11 +2,10 @@
|
|
|
2
2
|
function debounce(callback, delay) {
|
|
3
3
|
let timer;
|
|
4
4
|
return function(...args) {
|
|
5
|
-
let context = this;
|
|
6
5
|
clearTimeout(timer);
|
|
7
6
|
timer = setTimeout(() => {
|
|
8
7
|
timer = void 0;
|
|
9
|
-
callback.apply(
|
|
8
|
+
callback.apply(this, args);
|
|
10
9
|
}, delay);
|
|
11
10
|
};
|
|
12
11
|
}
|
|
@@ -64,7 +63,7 @@ var SnapElement = class {
|
|
|
64
63
|
element;
|
|
65
64
|
options;
|
|
66
65
|
align;
|
|
67
|
-
// @ts-
|
|
66
|
+
// @ts-expect-error
|
|
68
67
|
rect = {};
|
|
69
68
|
wrapperResizeObserver;
|
|
70
69
|
resizeObserver;
|
|
@@ -116,7 +115,8 @@ var SnapElement = class {
|
|
|
116
115
|
this.rect.right = left + width;
|
|
117
116
|
}
|
|
118
117
|
onWrapperResize = () => {
|
|
119
|
-
let top
|
|
118
|
+
let top;
|
|
119
|
+
let left;
|
|
120
120
|
if (this.options.ignoreSticky) removeParentSticky(this.element);
|
|
121
121
|
if (this.options.ignoreTransform) {
|
|
122
122
|
top = offsetTop(this.element);
|
|
@@ -169,7 +169,10 @@ var Snap = class {
|
|
|
169
169
|
};
|
|
170
170
|
this.onWindowResize();
|
|
171
171
|
window.addEventListener("resize", this.onWindowResize, false);
|
|
172
|
-
this.onSnapDebounced = debounce(
|
|
172
|
+
this.onSnapDebounced = debounce(
|
|
173
|
+
this.onSnap,
|
|
174
|
+
this.options.debounce
|
|
175
|
+
);
|
|
173
176
|
this.lenis.on("virtual-scroll", this.onSnapDebounced);
|
|
174
177
|
}
|
|
175
178
|
options;
|
|
@@ -296,8 +299,8 @@ var Snap = class {
|
|
|
296
299
|
});
|
|
297
300
|
}
|
|
298
301
|
get distanceThreshold() {
|
|
299
|
-
let distanceThreshold =
|
|
300
|
-
if (this.options.type === "mandatory") return
|
|
302
|
+
let distanceThreshold = Number.POSITIVE_INFINITY;
|
|
303
|
+
if (this.options.type === "mandatory") return Number.POSITIVE_INFINITY;
|
|
301
304
|
const { isHorizontal } = this.lenis;
|
|
302
305
|
const axis = isHorizontal ? "width" : "height";
|
|
303
306
|
if (typeof this.options.distanceThreshold === "string" && this.options.distanceThreshold.endsWith("%")) {
|
|
@@ -330,9 +333,9 @@ var Snap = class {
|
|
|
330
333
|
}
|
|
331
334
|
} else {
|
|
332
335
|
const prevSnap = snaps[prevSnapIndex];
|
|
333
|
-
const distanceToPrevSnap = prevSnap ? Math.abs(scroll - prevSnap.value) :
|
|
336
|
+
const distanceToPrevSnap = prevSnap ? Math.abs(scroll - prevSnap.value) : Number.POSITIVE_INFINITY;
|
|
334
337
|
const nextSnap = snaps[nextSnapIndex];
|
|
335
|
-
const distanceToNextSnap = nextSnap ? Math.abs(scroll - nextSnap.value) :
|
|
338
|
+
const distanceToNextSnap = nextSnap ? Math.abs(scroll - nextSnap.value) : Number.POSITIVE_INFINITY;
|
|
336
339
|
snapIndex = distanceToPrevSnap < distanceToNextSnap ? prevSnapIndex : nextSnapIndex;
|
|
337
340
|
}
|
|
338
341
|
if (snapIndex === void 0) return;
|
|
@@ -345,7 +348,9 @@ var Snap = class {
|
|
|
345
348
|
}
|
|
346
349
|
};
|
|
347
350
|
resize() {
|
|
348
|
-
this.elements.forEach((element) =>
|
|
351
|
+
this.elements.forEach((element) => {
|
|
352
|
+
element.onWrapperResize();
|
|
353
|
+
});
|
|
349
354
|
}
|
|
350
355
|
};
|
|
351
356
|
export {
|