Skip to content

Commit

Permalink
deprecate wheelEventsTarget option
Browse files Browse the repository at this point in the history
  • Loading branch information
@clementroche
clementroche committed Oct 3, 2023
1 parent d127115 commit 41d24a0
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 25 deletions.
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ requestAnimationFrame(raf)
|----------------------|-----------------------|----------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `wrapper` | `HTMLElement, Window` | `window` | The element that will be used as the scroll container |
| `content` | `HTMLElement` | `document.documentElement` | The element that contains the content that will be scrolled, usually `wrapper`'s direct child |
| `wheelEventsTarget` | `HTMLElement, Window` | `wrapper` | The element that will listen to `wheel` events |
| `eventsTarget` | `HTMLElement, Window` | `wrapper` | The element that will listen to `wheel` and `touch` events |
| `lerp` | `number` | `0.1` | Linear interpolation (lerp) intensity (between 0 and 1) |
| `duration` | `number` | `1.2` | The duration of scroll animation (in seconds). Useless if lerp defined |
| `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 |
Expand Down Expand Up @@ -99,7 +99,7 @@ requestAnimationFrame(raf)
|-------------------------|---------------|-------------------------------------------------------------|
| `animatedScroll` | `number` | Current scroll value |
| `dimensions` | `object` | Dimensions instance |
| `direction` | `number` | `0`: stopped, `1`: scrolling up, `-1`: scrolling down |
| `direction` | `number` | `1`: scrolling up, `-1`: scrolling down |
| `emitter` | `object` | Emitter instance |
| `options` | `object` | Instance options |
| `targetScroll` | `number` | Target scroll value |
Expand All @@ -114,6 +114,7 @@ requestAnimationFrame(raf)
| `progress` (getter) | `number` | Scroll progress from `0` to `1` |
| `rootElement` (getter) | `HTMLElement` | Element on which Lenis is instanced |
| `scroll` (getter) | `number` | Current scroll value (handles infinite scroll if activated) |
| `className` (getter) | `string` | `rootElement` className |

<br/>

Expand Down
20 changes: 11 additions & 9 deletions bundled/lenis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,8 @@
* @typedef LenisOptions
* @property {Window | HTMLElement} [wrapper]
* @property {HTMLElement} [content]
* @property {Window | HTMLElement} [wheelEventsTarget]
* @property {Window | HTMLElement} [wheelEventsTarget] // deprecated
* @property {Window | HTMLElement} [eventsTarget]
* @property {boolean} [smoothWheel]
* @property {boolean} [smoothTouch]
* @property {boolean} [syncTouch]
Expand Down Expand Up @@ -403,6 +404,8 @@
content = _ref$content === void 0 ? document.documentElement : _ref$content,
_ref$wheelEventsTarge = _ref.wheelEventsTarget,
wheelEventsTarget = _ref$wheelEventsTarge === void 0 ? wrapper : _ref$wheelEventsTarge,
_ref$eventsTarget = _ref.eventsTarget,
eventsTarget = _ref$eventsTarget === void 0 ? wheelEventsTarget : _ref$eventsTarget,
_ref$smoothWheel = _ref.smoothWheel,
smoothWheel = _ref$smoothWheel === void 0 ? true : _ref$smoothWheel,
_ref$smoothTouch = _ref.smoothTouch,
Expand All @@ -421,7 +424,7 @@
return Math.min(1, 1.001 - Math.pow(2, -10 * t));
} : _ref$easing,
_ref$lerp = _ref.lerp,
lerp = _ref$lerp === void 0 ? duration && 0.1 : _ref$lerp,
lerp = _ref$lerp === void 0 ? !duration && 0.1 : _ref$lerp,
_ref$infinite = _ref.infinite,
infinite = _ref$infinite === void 0 ? false : _ref$infinite,
_ref$orientation = _ref.orientation,
Expand Down Expand Up @@ -508,6 +511,7 @@
wrapper: wrapper,
content: content,
wheelEventsTarget: wheelEventsTarget,
eventsTarget: eventsTarget,
smoothWheel: smoothWheel,
smoothTouch: smoothTouch,
syncTouch: _syncTouch,
Expand All @@ -534,14 +538,15 @@
});
this.toggleClass('lenis', true);
this.velocity = 0;
this.isLocked = false;
this.isStopped = false;
this.isSmooth = smoothWheel || smoothTouch;
this.isSmooth = _syncTouch || smoothWheel || smoothTouch;
this.isScrolling = false;
this.targetScroll = this.animatedScroll = this.actualScroll;
this.options.wrapper.addEventListener('scroll', this.onScroll, {
passive: false
});
this.virtualScroll = new VirtualScroll(wheelEventsTarget, {
this.virtualScroll = new VirtualScroll(eventsTarget, {
touchMultiplier: touchMultiplier,
wheelMultiplier: wheelMultiplier,
normalizeWheel: normalizeWheel
Expand Down Expand Up @@ -622,7 +627,7 @@
force = _ref3$force === void 0 ? false : _ref3$force,
_ref3$programmatic = _ref3.programmatic,
programmatic = _ref3$programmatic === void 0 ? true : _ref3$programmatic;
if (this.isStopped && !force) return;
if ((this.isStopped || this.isLocked) && !force) return;

// keywords
if (['top', 'left', 'start'].includes(target)) {
Expand Down Expand Up @@ -663,7 +668,6 @@
this.animatedScroll = this.targetScroll = target;
this.setScroll(this.scroll);
this.reset();
this.emit();
onComplete == null ? void 0 : onComplete(this);
return;
}
Expand Down Expand Up @@ -696,9 +700,7 @@
if (completed) {
// avoid emitting twice (onScroll)
requestAnimationFrame(function () {
_this2.isScrolling = false;
_this2.velocity = 0;
if (lock) _this2.isLocked = false;
_this2.reset();
_this2.emit();
onComplete == null ? void 0 : onComplete(_this2);
});
Expand Down
9 changes: 6 additions & 3 deletions dist/types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ export default class Lenis {
* @typedef LenisOptions
* @property {Window | HTMLElement} [wrapper]
* @property {HTMLElement} [content]
* @property {Window | HTMLElement} [wheelEventsTarget]
* @property {Window | HTMLElement} [wheelEventsTarget] // deprecated
* @property {Window | HTMLElement} [eventsTarget]
* @property {boolean} [smoothWheel]
* @property {boolean} [smoothTouch]
* @property {boolean} [syncTouch]
Expand All @@ -27,10 +28,11 @@ export default class Lenis {
*
* @param {LenisOptions}
*/
constructor({ wrapper, content, wheelEventsTarget, smoothWheel, smoothTouch, syncTouch, syncTouchLerp, __iosNoInertiaSyncTouchLerp, touchInertiaMultiplier, duration, easing, lerp, infinite, orientation, gestureOrientation, touchMultiplier, wheelMultiplier, normalizeWheel, autoResize, }?: {
constructor({ wrapper, content, wheelEventsTarget, eventsTarget, smoothWheel, smoothTouch, syncTouch, syncTouchLerp, __iosNoInertiaSyncTouchLerp, touchInertiaMultiplier, duration, easing, lerp, infinite, orientation, gestureOrientation, touchMultiplier, wheelMultiplier, normalizeWheel, autoResize, }?: {
wrapper?: Window | HTMLElement;
content?: HTMLElement;
wheelEventsTarget?: Window | HTMLElement;
eventsTarget?: Window | HTMLElement;
smoothWheel?: boolean;
smoothTouch?: boolean;
syncTouch?: boolean;
Expand All @@ -52,6 +54,7 @@ export default class Lenis {
wrapper: Window | HTMLElement;
content: HTMLElement;
wheelEventsTarget: Window | HTMLElement;
eventsTarget: Window | HTMLElement;
smoothWheel: boolean;
smoothTouch: boolean;
syncTouch: boolean;
Expand All @@ -73,6 +76,7 @@ export default class Lenis {
emitter: Emitter;
dimensions: Dimensions;
velocity: number;
isLocked: boolean;
set isStopped(arg: any);
get isStopped(): any;
set isSmooth(arg: any);
Expand All @@ -96,7 +100,6 @@ export default class Lenis {
onScroll: () => void;
direction: number;
reset(): void;
isLocked: boolean;
start(): void;
stop(): void;
raf(time: any): void;
Expand Down
22 changes: 11 additions & 11 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ export default class Lenis {
* @typedef LenisOptions
* @property {Window | HTMLElement} [wrapper]
* @property {HTMLElement} [content]
* @property {Window | HTMLElement} [wheelEventsTarget]
* @property {Window | HTMLElement} [wheelEventsTarget] // deprecated
* @property {Window | HTMLElement} [eventsTarget]
* @property {boolean} [smoothWheel]
* @property {boolean} [smoothTouch]
* @property {boolean} [syncTouch]
Expand All @@ -50,7 +51,8 @@ export default class Lenis {
constructor({
wrapper = window,
content = document.documentElement,
wheelEventsTarget = wrapper,
wheelEventsTarget = wrapper, // deprecated
eventsTarget = wheelEventsTarget,
smoothWheel = true,
smoothTouch = false,
syncTouch = false,
Expand All @@ -59,7 +61,7 @@ export default class Lenis {
touchInertiaMultiplier = 35,
duration, // in seconds
easing = (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
lerp = duration && 0.1,
lerp = !duration && 0.1,
infinite = false,
orientation = 'vertical', // vertical, horizontal
gestureOrientation = 'vertical', // vertical, horizontal, both
Expand All @@ -79,6 +81,7 @@ export default class Lenis {
wrapper,
content,
wheelEventsTarget,
eventsTarget,
smoothWheel,
smoothTouch,
syncTouch,
Expand All @@ -103,16 +106,17 @@ export default class Lenis {
this.toggleClass('lenis', true)

this.velocity = 0
this.isLocked = false
this.isStopped = false
this.isSmooth = smoothWheel || smoothTouch
this.isSmooth = syncTouch || smoothWheel || smoothTouch
this.isScrolling = false
this.targetScroll = this.animatedScroll = this.actualScroll

this.options.wrapper.addEventListener('scroll', this.onScroll, {
passive: false,
})

this.virtualScroll = new VirtualScroll(wheelEventsTarget, {
this.virtualScroll = new VirtualScroll(eventsTarget, {
touchMultiplier,
wheelMultiplier,
normalizeWheel,
Expand Down Expand Up @@ -289,7 +293,7 @@ export default class Lenis {
programmatic = true, // called from outside of the class
} = {}
) {
if (this.isStopped && !force) return
if ((this.isStopped || this.isLocked) && !force) return

// keywords
if (['top', 'left', 'start'].includes(target)) {
Expand Down Expand Up @@ -338,7 +342,6 @@ export default class Lenis {
this.animatedScroll = this.targetScroll = target
this.setScroll(this.scroll)
this.reset()
this.emit()
onComplete?.(this)
return
}
Expand Down Expand Up @@ -378,10 +381,7 @@ export default class Lenis {
if (completed) {
// avoid emitting twice (onScroll)
requestAnimationFrame(() => {
this.isScrolling = false
this.velocity = 0

if (lock) this.isLocked = false
this.reset()
this.emit()
onComplete?.(this)
})
Expand Down

2 comments on commit 41d24a0

@vercel
Copy link

@vercel vercel bot commented on 41d24a0 Oct 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

lenis – ./

lenis-git-main-studio-freight.vercel.app
lenis.studiofreight.com
lenis-studio-freight.vercel.app
lenis.vercel.app

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"⚡️ Lighthouse report for the changes in this commit:

🔴 Performance: 35
🟠 Accessibility: 88
🟢 Best practices: 100
🟠 SEO: 67
🔴 PWA: 0

Lighthouse ran on https://greensock.com/requires-membership/?plugin=SplitText&source=trial"

Please sign in to comment.