lenis 1.3.16 → 1.3.17-framer
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 -28
- package/dist/lenis.d.ts +11 -6
- package/dist/lenis.js +41 -25
- 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 +41 -25
- package/dist/lenis.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ If you’ve used Lenis and it made your site feel just a little more alive, cons
|
|
|
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
41
|
<!-- sponsors -->
|
|
42
|
-
[](https://github.com/syntaxfm) [](https://github.com/ae-com) [](https://github.com/smsunarto) [](https://github.com/thearkis) [](https://github.com/syntaxfm) [](https://github.com/ae-com) [](https://github.com/smsunarto) [](https://github.com/thearkis) [](https://github.com/cachet-studio) [](https://github.com/ironvelvet) [](https://github.com/mariosmaselli) [](https://github.com/vallafederico) [](https://github.com/bizarro) [](https://github.com/mielucristian) [](https://github.com/itsoffbrand) [](https://github.com/glauber-sampaio) [](https://github.com/velox-themes) [](https://github.com/blackpixelca) [](https://github.com/Tarang74) [](https://github.com/joevingracien)
|
|
43
43
|
<!-- sponsors -->
|
|
44
44
|
|
|
45
45
|
<br/>
|
|
@@ -82,7 +82,7 @@ import Lenis from 'lenis'
|
|
|
82
82
|
Using scripts:
|
|
83
83
|
|
|
84
84
|
```html
|
|
85
|
-
<script src="https://unpkg.com/lenis@1.3.
|
|
85
|
+
<script src="https://unpkg.com/lenis@1.3.17/dist/lenis.min.js"></script>
|
|
86
86
|
```
|
|
87
87
|
|
|
88
88
|
|
|
@@ -129,7 +129,7 @@ import 'lenis/dist/lenis.css'
|
|
|
129
129
|
**Or link the CSS file:**
|
|
130
130
|
|
|
131
131
|
```html
|
|
132
|
-
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.
|
|
132
|
+
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.17/dist/lenis.css">
|
|
133
133
|
```
|
|
134
134
|
|
|
135
135
|
**Or add it manually:**
|
|
@@ -166,31 +166,33 @@ gsap.ticker.lagSmoothing(0);
|
|
|
166
166
|
|
|
167
167
|
## Settings
|
|
168
168
|
|
|
169
|
-
| Option
|
|
170
|
-
|
|
171
|
-
| `wrapper`
|
|
172
|
-
| `content`
|
|
173
|
-
| `eventsTarget`
|
|
174
|
-
| `smoothWheel`
|
|
175
|
-
| `lerp`
|
|
176
|
-
| `duration`
|
|
177
|
-
| `easing`
|
|
178
|
-
| `orientation`
|
|
179
|
-
| `gestureOrientation`
|
|
180
|
-
| `syncTouch`
|
|
181
|
-
| `syncTouchLerp`
|
|
182
|
-
| `touchInertiaExponent`
|
|
183
|
-
| `wheelMultiplier`
|
|
184
|
-
| `touchMultiplier`
|
|
185
|
-
| `infinite`
|
|
186
|
-
| `autoResize`
|
|
187
|
-
| `prevent`
|
|
188
|
-
| `virtualScroll`
|
|
189
|
-
| `overscroll`
|
|
190
|
-
| `autoRaf`
|
|
191
|
-
| `anchors`
|
|
192
|
-
| `autoToggle`
|
|
193
|
-
| `allowNestedScroll`
|
|
169
|
+
| Option | Type | Default | Description |
|
|
170
|
+
|-------------------------|----------------------------|----------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
171
|
+
| `wrapper` | `HTMLElement, Window` | `window` | The element that will be used as the scroll container. |
|
|
172
|
+
| `content` | `HTMLElement` | `document.documentElement` | The element that contains the content that will be scrolled, usually `wrapper`'s direct child. |
|
|
173
|
+
| `eventsTarget` | `HTMLElement, Window` | `wrapper` | The element that will listen to `wheel` and `touch` events. |
|
|
174
|
+
| `smoothWheel` | `boolean` | `true` | Smooth the scroll initiated by `wheel` events. |
|
|
175
|
+
| `lerp` | `number` | `0.1` | Linear interpolation (lerp) intensity (between 0 and 1). |
|
|
176
|
+
| `duration` | `number` | `1.2` | The duration of scroll animation (in seconds). Useless if lerp defined. |
|
|
177
|
+
| `easing` | `function` | `(t) => Math.min(1, 1.001 - Math.pow(2, -10 * t))` | The easing function to use for the scroll animation, our default is custom but you can pick one from [Easings.net](https://easings.net/en). Useless if lerp defined. |
|
|
178
|
+
| `orientation` | `string` | `vertical` | The orientation of the scrolling. Can be `vertical` or `horizontal`. |
|
|
179
|
+
| `gestureOrientation` | `string` | `vertical` | The orientation of the gestures. Can be `vertical`, `horizontal` or `both`. |
|
|
180
|
+
| `syncTouch` | `boolean` | `false` | Mimic touch device scroll while allowing scroll sync (can be unstable on iOS<16). |
|
|
181
|
+
| `syncTouchLerp` | `number` | `0.075` | Lerp applied during `syncTouch` inertia. |
|
|
182
|
+
| `touchInertiaExponent` | `number` | `1.7` | Manage the strength of syncTouch inertia. |
|
|
183
|
+
| `wheelMultiplier` | `number` | `1` | The multiplier to use for mouse wheel events. |
|
|
184
|
+
| `touchMultiplier` | `number` | `1` | The multiplier to use for touch events. |
|
|
185
|
+
| `infinite` | `boolean` | `false` | Enable infinite scrolling! `syncTouch: true` is required on touch devices ([See example](https://codepen.io/ClementRoche/pen/OJqBLod)). |
|
|
186
|
+
| `autoResize` | `boolean` | `true` | Resize instance automatically based on `ResizeObserver`. If `false` you must resize manually using `.resize()`. |
|
|
187
|
+
| `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')`. |
|
|
188
|
+
| `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). |
|
|
189
|
+
| `overscroll` | `boolean` | `true` | Similar to CSS overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior). |
|
|
190
|
+
| `autoRaf` | `boolean` | `false` | Whether or not to automatically run `requestAnimationFrame` loop. |
|
|
191
|
+
| `anchors` | `boolean, ScrollToOptions` | `false` | Scroll to anchor links when clicked. If `true` is passed, it will enable anchor links with default options. If `ScrollToOptions` is passed, it will enable anchor links with the given options. |
|
|
192
|
+
| `autoToggle` | `boolean` | `false` | Automatically start or stop the lenis instance based on the wrapper's overflow property, ⚠️ this requires Lenis recommended CSS. Safari > 17.3, Chrome > 116 and Firefox > 128 ([https://caniuse.com/?search=transition-behavior](https://caniuse.com/?search=transition-behavior)). |
|
|
193
|
+
| `allowNestedScroll` | `boolean` | `false` | Allow nested scrolls. If `true` is passed, it will allow nested scrolls. If `false` is passed, it will not allow nested scrolls. ⚠️ To be used with caution since this can lead to performance issues, prefer using `prevent` or `data-lenis-prevent` instead. |
|
|
194
|
+
| `naiveDimensions` | `boolean` | `false` | If `true`, Lenis will use naive dimensions calculation. ⚠️ Be careful, this has a performance impact. |
|
|
195
|
+
| `stopInertiaOnNavigate` | `boolean` | `false` | If `true`, Lenis will stop inertia when an internal link is clicked. |
|
|
194
196
|
<br/>
|
|
195
197
|
|
|
196
198
|
<!-- `target`: goal to reach
|
package/dist/lenis.d.ts
CHANGED
|
@@ -238,10 +238,15 @@ type LenisOptions = {
|
|
|
238
238
|
*/
|
|
239
239
|
allowNestedScroll?: boolean;
|
|
240
240
|
/**
|
|
241
|
-
* If `true`, Lenis will use naive dimensions calculation
|
|
241
|
+
* If `true`, Lenis will use naive dimensions calculation, be careful this has a performance impact
|
|
242
242
|
* @default false
|
|
243
243
|
*/
|
|
244
|
-
|
|
244
|
+
naiveDimensions?: boolean;
|
|
245
|
+
/**
|
|
246
|
+
* If `true`, Lenis will stop inertia when an internal link is clicked
|
|
247
|
+
* @default false
|
|
248
|
+
*/
|
|
249
|
+
stopInertiaOnNavigate?: boolean;
|
|
245
250
|
};
|
|
246
251
|
declare global {
|
|
247
252
|
interface Window {
|
|
@@ -256,7 +261,7 @@ declare class Lenis {
|
|
|
256
261
|
private _isLocked;
|
|
257
262
|
private _preventNextNativeScrollEvent;
|
|
258
263
|
private _resetVelocityTimeout;
|
|
259
|
-
private
|
|
264
|
+
private _rafId;
|
|
260
265
|
/**
|
|
261
266
|
* Whether or not the user is touching the screen
|
|
262
267
|
*/
|
|
@@ -308,7 +313,7 @@ declare class Lenis {
|
|
|
308
313
|
easing, lerp, infinite, orientation, // vertical, horizontal
|
|
309
314
|
gestureOrientation, // vertical, horizontal, both
|
|
310
315
|
touchMultiplier, wheelMultiplier, autoResize, prevent, virtualScroll, overscroll, autoRaf, anchors, autoToggle, // https://caniuse.com/?search=transition-behavior
|
|
311
|
-
allowNestedScroll, __experimental__naiveDimensions, }?: LenisOptions);
|
|
316
|
+
allowNestedScroll, __experimental__naiveDimensions, naiveDimensions, stopInertiaOnNavigate, }?: LenisOptions);
|
|
312
317
|
/**
|
|
313
318
|
* Destroy the lenis instance, remove all event listeners and clean up the class name
|
|
314
319
|
*/
|
|
@@ -382,8 +387,8 @@ declare class Lenis {
|
|
|
382
387
|
* },
|
|
383
388
|
* })
|
|
384
389
|
*/
|
|
385
|
-
scrollTo(target: number | string | HTMLElement, { offset, immediate, lock,
|
|
386
|
-
|
|
390
|
+
scrollTo(target: number | string | HTMLElement, { offset, immediate, lock, programmatic, // called from outside of the class
|
|
391
|
+
lerp, duration, easing, onStart, onComplete, force, // scroll even if stopped
|
|
387
392
|
userData, }?: ScrollToOptions): void;
|
|
388
393
|
private preventNextNativeScrollEvent;
|
|
389
394
|
private checkNestedScroll;
|
package/dist/lenis.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// package.json
|
|
2
|
-
var version = "1.3.
|
|
2
|
+
var version = "1.3.17-framer";
|
|
3
3
|
|
|
4
4
|
// packages/core/src/maths.ts
|
|
5
5
|
function clamp(min, input, max) {
|
|
@@ -337,7 +337,7 @@ var Lenis = class {
|
|
|
337
337
|
// same as isStopped but enabled/disabled when scroll reaches target
|
|
338
338
|
_preventNextNativeScrollEvent = false;
|
|
339
339
|
_resetVelocityTimeout = null;
|
|
340
|
-
|
|
340
|
+
_rafId = null;
|
|
341
341
|
/**
|
|
342
342
|
* Whether or not the user is touching the screen
|
|
343
343
|
*/
|
|
@@ -416,7 +416,10 @@ var Lenis = class {
|
|
|
416
416
|
autoToggle = false,
|
|
417
417
|
// https://caniuse.com/?search=transition-behavior
|
|
418
418
|
allowNestedScroll = false,
|
|
419
|
-
|
|
419
|
+
// @ts-ignore: this will be deprecated in the future
|
|
420
|
+
__experimental__naiveDimensions = false,
|
|
421
|
+
naiveDimensions = __experimental__naiveDimensions,
|
|
422
|
+
stopInertiaOnNavigate = false
|
|
420
423
|
} = {}) {
|
|
421
424
|
window.lenisVersion = version;
|
|
422
425
|
if (!wrapper || wrapper === document.documentElement) {
|
|
@@ -451,7 +454,8 @@ var Lenis = class {
|
|
|
451
454
|
anchors,
|
|
452
455
|
autoToggle,
|
|
453
456
|
allowNestedScroll,
|
|
454
|
-
|
|
457
|
+
naiveDimensions,
|
|
458
|
+
stopInertiaOnNavigate
|
|
455
459
|
};
|
|
456
460
|
this.dimensions = new Dimensions(wrapper, content, { autoResize });
|
|
457
461
|
this.updateClassName();
|
|
@@ -460,7 +464,7 @@ var Lenis = class {
|
|
|
460
464
|
this.options.wrapper.addEventListener("scrollend", this.onScrollEnd, {
|
|
461
465
|
capture: true
|
|
462
466
|
});
|
|
463
|
-
if (this.options.anchors
|
|
467
|
+
if (this.options.anchors || this.options.stopInertiaOnNavigate) {
|
|
464
468
|
this.options.wrapper.addEventListener(
|
|
465
469
|
"click",
|
|
466
470
|
this.onClick,
|
|
@@ -484,7 +488,7 @@ var Lenis = class {
|
|
|
484
488
|
});
|
|
485
489
|
}
|
|
486
490
|
if (this.options.autoRaf) {
|
|
487
|
-
this.
|
|
491
|
+
this._rafId = requestAnimationFrame(this.raf);
|
|
488
492
|
}
|
|
489
493
|
}
|
|
490
494
|
/**
|
|
@@ -505,7 +509,7 @@ var Lenis = class {
|
|
|
505
509
|
this.onPointerDown,
|
|
506
510
|
false
|
|
507
511
|
);
|
|
508
|
-
if (this.options.anchors
|
|
512
|
+
if (this.options.anchors || this.options.stopInertiaOnNavigate) {
|
|
509
513
|
this.options.wrapper.removeEventListener(
|
|
510
514
|
"click",
|
|
511
515
|
this.onClick,
|
|
@@ -515,8 +519,8 @@ var Lenis = class {
|
|
|
515
519
|
this.virtualScroll.destroy();
|
|
516
520
|
this.dimensions.destroy();
|
|
517
521
|
this.cleanUpClassName();
|
|
518
|
-
if (this.
|
|
519
|
-
cancelAnimationFrame(this.
|
|
522
|
+
if (this._rafId) {
|
|
523
|
+
cancelAnimationFrame(this._rafId);
|
|
520
524
|
}
|
|
521
525
|
}
|
|
522
526
|
on(event, callback) {
|
|
@@ -568,15 +572,28 @@ var Lenis = class {
|
|
|
568
572
|
}
|
|
569
573
|
onClick = (event) => {
|
|
570
574
|
const path = event.composedPath();
|
|
571
|
-
const
|
|
572
|
-
(node) => node instanceof HTMLAnchorElement && node.getAttribute("href")
|
|
575
|
+
const anchorElements = path.filter(
|
|
576
|
+
(node) => node instanceof HTMLAnchorElement && node.getAttribute("href")
|
|
573
577
|
);
|
|
574
|
-
if (
|
|
575
|
-
const
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
578
|
+
if (this.options.anchors) {
|
|
579
|
+
const anchor = anchorElements.find(
|
|
580
|
+
(node) => node.getAttribute("href")?.includes("#")
|
|
581
|
+
);
|
|
582
|
+
if (anchor) {
|
|
583
|
+
const href = anchor.getAttribute("href");
|
|
584
|
+
if (href) {
|
|
585
|
+
const options = typeof this.options.anchors === "object" && this.options.anchors ? this.options.anchors : void 0;
|
|
586
|
+
const target = `#${href.split("#")[1]}`;
|
|
587
|
+
this.scrollTo(target, options);
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
if (this.options.stopInertiaOnNavigate) {
|
|
592
|
+
const internalLink = anchorElements.find(
|
|
593
|
+
(node) => node.host === window.location.host
|
|
594
|
+
);
|
|
595
|
+
if (internalLink) {
|
|
596
|
+
this.reset();
|
|
580
597
|
}
|
|
581
598
|
}
|
|
582
599
|
};
|
|
@@ -647,7 +664,6 @@ var Lenis = class {
|
|
|
647
664
|
programmatic: false,
|
|
648
665
|
...isSyncTouch ? {
|
|
649
666
|
lerp: hasTouchInertia ? this.options.syncTouchLerp : 1
|
|
650
|
-
// immediate: !hasTouchInertia,
|
|
651
667
|
} : {
|
|
652
668
|
lerp: this.options.lerp,
|
|
653
669
|
duration: this.options.duration,
|
|
@@ -748,7 +764,7 @@ var Lenis = class {
|
|
|
748
764
|
this.time = time;
|
|
749
765
|
this.animate.advance(deltaTime * 1e-3);
|
|
750
766
|
if (this.options.autoRaf) {
|
|
751
|
-
this.
|
|
767
|
+
this._rafId = requestAnimationFrame(this.raf);
|
|
752
768
|
}
|
|
753
769
|
};
|
|
754
770
|
/**
|
|
@@ -775,15 +791,15 @@ var Lenis = class {
|
|
|
775
791
|
offset = 0,
|
|
776
792
|
immediate = false,
|
|
777
793
|
lock = false,
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
lerp: lerp2 = this.options.lerp,
|
|
794
|
+
programmatic = true,
|
|
795
|
+
// called from outside of the class
|
|
796
|
+
lerp: lerp2 = programmatic ? this.options.lerp : void 0,
|
|
797
|
+
duration = programmatic ? this.options.duration : void 0,
|
|
798
|
+
easing = programmatic ? this.options.easing : void 0,
|
|
781
799
|
onStart,
|
|
782
800
|
onComplete,
|
|
783
801
|
force = false,
|
|
784
802
|
// scroll even if stopped
|
|
785
|
-
programmatic = true,
|
|
786
|
-
// called from outside of the class
|
|
787
803
|
userData
|
|
788
804
|
} = {}) {
|
|
789
805
|
if ((this.isStopped || this.isLocked) && !force) return;
|
|
@@ -988,7 +1004,7 @@ var Lenis = class {
|
|
|
988
1004
|
* The limit which is the maximum scroll value
|
|
989
1005
|
*/
|
|
990
1006
|
get limit() {
|
|
991
|
-
if (this.options.
|
|
1007
|
+
if (this.options.naiveDimensions) {
|
|
992
1008
|
if (this.isHorizontal) {
|
|
993
1009
|
return this.rootElement.scrollWidth - this.rootElement.clientWidth;
|
|
994
1010
|
} else {
|