Skip to content

Commit

Permalink
firefox deltaMode
Browse files Browse the repository at this point in the history
  • Loading branch information
@clementroche
clementroche committed Mar 17, 2024
1 parent 692cadb commit 4dd2924
Show file tree
Hide file tree
Showing 18 changed files with 154 additions and 110 deletions.
2 changes: 1 addition & 1 deletion packages/lenis/dist/lenis.cjs.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/lenis/dist/lenis.cjs.js.map
View file

Large diffs are not rendered by default.

34 changes: 21 additions & 13 deletions packages/lenis/dist/lenis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,22 +192,22 @@
}
}

const LINE_HEIGHT = 100 / 6;

class VirtualScroll {
constructor(
element,
{ wheelMultiplier = 1, touchMultiplier = 2, normalizeWheel = false }
) {
constructor(element, { wheelMultiplier = 1, touchMultiplier = 1 }) {
this.element = element;
this.wheelMultiplier = wheelMultiplier;
this.touchMultiplier = touchMultiplier;
this.normalizeWheel = normalizeWheel;

this.touchStart = {
x: null,
y: null,
};

this.emitter = new Emitter();
window.addEventListener('resize', this.onWindowResize, false);
this.onWindowResize();

this.element.addEventListener('wheel', this.onWheel, { passive: false });
this.element.addEventListener('touchstart', this.onTouchStart, {
Expand All @@ -230,6 +230,8 @@
destroy() {
this.emitter.destroy();

window.removeEventListener('resize', this.onWindowResize, false);

this.element.removeEventListener('wheel', this.onWheel, {
passive: false,
});
Expand Down Expand Up @@ -299,22 +301,30 @@

// Event handler for 'wheel' event
onWheel = (event) => {
let { deltaX, deltaY } = event;
let { deltaX, deltaY, deltaMode } = event;

if (this.normalizeWheel) {
deltaX = clamp(-100, deltaX, 100);
deltaY = clamp(-100, deltaY, 100);
}
const multiplierX =
deltaMode === 1 ? LINE_HEIGHT : deltaMode === 2 ? this.windowWidth : 1;
const multiplierY =
deltaMode === 1 ? LINE_HEIGHT : deltaMode === 2 ? this.windowHeight : 1;

deltaX *= multiplierX;
deltaY *= multiplierY;

deltaX *= this.wheelMultiplier;
deltaY *= this.wheelMultiplier;

this.emitter.emit('scroll', { deltaX, deltaY, event });
}

onWindowResize = () => {
this.windowWidth = window.innerWidth;
this.windowHeight = window.innerHeight;
}
}

class Lenis {
constructor({ wrapper = window, content = document.documentElement, wheelEventsTarget = wrapper, eventsTarget = wheelEventsTarget, smoothWheel = true, syncTouch = false, syncTouchLerp = 0.075, touchInertiaMultiplier = 35, duration, easing = (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), lerp = !duration && 0.1, infinite = false, orientation = 'vertical', gestureOrientation = 'vertical', touchMultiplier = 1, wheelMultiplier = 1, normalizeWheel = false, autoResize = true, __experimental__naiveDimensions = false, } = {}) {
constructor({ wrapper = window, content = document.documentElement, wheelEventsTarget = wrapper, eventsTarget = wheelEventsTarget, smoothWheel = true, syncTouch = false, syncTouchLerp = 0.075, touchInertiaMultiplier = 35, duration, easing = (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), lerp = !duration && 0.1, infinite = false, orientation = 'vertical', gestureOrientation = 'vertical', touchMultiplier = 1, wheelMultiplier = 1, autoResize = true, __experimental__naiveDimensions = false, } = {}) {
this.__isSmooth = false;
this.__isScrolling = false;
this.__isStopped = false;
Expand Down Expand Up @@ -414,7 +424,6 @@
orientation,
touchMultiplier,
wheelMultiplier,
normalizeWheel,
autoResize,
__experimental__naiveDimensions,
};
Expand All @@ -432,7 +441,6 @@
this.virtualScroll = new VirtualScroll(eventsTarget, {
touchMultiplier,
wheelMultiplier,
normalizeWheel,
});
this.virtualScroll.on('scroll', this.onVirtualScroll);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/lenis/dist/lenis.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/lenis/dist/lenis.mjs
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/lenis/dist/lenis.mjs.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/lenis/dist/lenis.umd.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/lenis/dist/lenis.umd.js.map
View file

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions packages/lenis/dist/types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export type LenisOptions = {
gestureOrientation?: GestureOrientation;
touchMultiplier?: number;
wheelMultiplier?: number;
normalizeWheel?: boolean;
autoResize?: boolean;
__experimental__naiveDimensions?: boolean;
};
Expand All @@ -27,7 +26,7 @@ export default class Lenis {
__isScrolling: boolean;
__isStopped: boolean;
__isLocked: boolean;
constructor({ wrapper, content, wheelEventsTarget, eventsTarget, smoothWheel, syncTouch, syncTouchLerp, touchInertiaMultiplier, duration, easing, lerp, infinite, orientation, gestureOrientation, touchMultiplier, wheelMultiplier, normalizeWheel, autoResize, __experimental__naiveDimensions, }?: LenisOptions);
constructor({ wrapper, content, wheelEventsTarget, eventsTarget, smoothWheel, syncTouch, syncTouchLerp, touchInertiaMultiplier, duration, easing, lerp, infinite, orientation, gestureOrientation, touchMultiplier, wheelMultiplier, autoResize, __experimental__naiveDimensions, }?: LenisOptions);
destroy(): void;
on(event: string, callback: Function): any;
off(event: string, callback: Function): any;
Expand Down
7 changes: 4 additions & 3 deletions packages/lenis/dist/types/virtual-scroll.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
export class VirtualScroll {
constructor(element: any, { wheelMultiplier, touchMultiplier, normalizeWheel }: {
constructor(element: any, { wheelMultiplier, touchMultiplier }: {
wheelMultiplier?: number | undefined;
touchMultiplier?: number | undefined;
normalizeWheel?: boolean | undefined;
});
element: any;
wheelMultiplier: number;
touchMultiplier: number;
normalizeWheel: boolean;
touchStart: {
x: null;
y: null;
Expand All @@ -26,5 +24,8 @@ export class VirtualScroll {
onTouchMove: (event: any) => void;
onTouchEnd: (event: any) => void;
onWheel: (event: any) => void;
onWindowResize: () => void;
windowWidth: number | undefined;
windowHeight: number | undefined;
}
import { Emitter } from './emitter';
88 changes: 86 additions & 2 deletions packages/lenis/playground/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
Expand All @@ -7,7 +7,91 @@
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<div id="app">
<div>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
target="_blank"
>
<img
src="/javascript.svg"
class="logo vanilla"
alt="JavaScript logo"
/>
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">Click on the Vite logo to learn more</p>
</div>
<section id="observer"></section>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
target="_blank"
>
<img
src="/javascript.svg"
class="logo vanilla"
alt="JavaScript logo"
/>
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">Click on the Vite logo to learn more</p>
</div>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
target="_blank"
>
<img
src="/javascript.svg"
class="logo vanilla"
alt="JavaScript logo"
/>
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">Click on the Vite logo to learn more</p>
</div>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
target="_blank"
>
<img
src="/javascript.svg"
class="logo vanilla"
alt="JavaScript logo"
/>
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">Click on the Vite logo to learn more</p>
</div>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>
67 changes: 0 additions & 67 deletions packages/lenis/playground/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import Lenis from '../dist/lenis.mjs'
import { setupCounter } from './counter.js'
// import './jank.js'
import javascriptLogo from './javascript.svg'
import './style.css'
import viteLogo from '/vite.svg'

const lenis = new Lenis({
smoothWheel: true,
Expand All @@ -28,69 +26,4 @@ requestAnimationFrame((deltaTime) => {
update(deltaTime)
})

document.querySelector('#app').innerHTML = `
<div>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="${viteLogo}" class="logo" alt="Vite logo" />
</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite logo to learn more
</p>
</div>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="${viteLogo}" class="logo" alt="Vite logo" />
</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite logo to learn more
</p>
</div>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="${viteLogo}" class="logo" alt="Vite logo" />
</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite logo to learn more
</p>
</div>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="${viteLogo}" class="logo" alt="Vite logo" />
</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite logo to learn more
</p>
</div>
</div>
`

setupCounter(document.querySelector('#counter'))
3 changes: 3 additions & 0 deletions packages/lenis/playground/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,8 @@
},
"devDependencies": {
"vite": "^5.0.8"
},
"dependencies": {
"gsap": "^3.12.5"
}
}
6 changes: 6 additions & 0 deletions packages/lenis/playground/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,3 +131,9 @@ button:focus-visible {
min-width: 20vw;
}
}

#observer {
height: 50vh;
width: 100%;
background-color: blue;
}
5 changes: 5 additions & 0 deletions packages/lenis/playground/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,11 @@ fsevents@~2.3.2, fsevents@~2.3.3:
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==

gsap@^3.12.5:
version "3.12.5"
resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.12.5.tgz#136c02dad4c673b441bdb1ca00104bfcb4eae7f4"
integrity sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==

nanoid@^3.3.7:
version "3.3.7"
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
Expand Down
4 changes: 0 additions & 4 deletions packages/lenis/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export type LenisOptions = {
gestureOrientation?: GestureOrientation
touchMultiplier?: number
wheelMultiplier?: number
normalizeWheel?: boolean
autoResize?: boolean
__experimental__naiveDimensions?: boolean
}
Expand Down Expand Up @@ -62,7 +61,6 @@ export default class Lenis {
gestureOrientation = 'vertical', // vertical, horizontal, both
touchMultiplier = 1,
wheelMultiplier = 1,
normalizeWheel = false, // deprecated
autoResize = true,
__experimental__naiveDimensions = false,
}: LenisOptions = {}) {
Expand Down Expand Up @@ -90,7 +88,6 @@ export default class Lenis {
orientation,
touchMultiplier,
wheelMultiplier,
normalizeWheel,
autoResize,
__experimental__naiveDimensions,
}
Expand All @@ -112,7 +109,6 @@ export default class Lenis {
this.virtualScroll = new VirtualScroll(eventsTarget, {
touchMultiplier,
wheelMultiplier,
normalizeWheel,
})
this.virtualScroll.on('scroll', this.onVirtualScroll)
}
Expand Down
Loading

1 comment on commit 4dd2924

@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: 91
🟢 Accessibility: 96
🟢 Best practices: 100
🟠 SEO: 67
🔴 PWA: 33

Lighthouse ran on https://lenis-lghs4o0da-studio-freight.vercel.app/"

Please sign in to comment.