flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Upgrade Lenis smooth scroll

Browse Source
This commit is contained in:
Félix Péault
2022-09-09 12:26:08 +02:00
parent 77824594e7
commit 3374871f2f
3 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -15,7 +15,7 @@
"lint": "eslint --ignore-path .gitignore ." "lint": "eslint --ignore-path .gitignore ."
}, },
"dependencies": { "dependencies": {
"@studio-freight/lenis": "^0.1.18", "@studio-freight/lenis": "^0.2.1",
"dayjs": "^1.11.5", "dayjs": "^1.11.5",
"embla-carousel": "^7.0.2", "embla-carousel": "^7.0.2",
"focus-visible": "^5.2.0", "focus-visible": "^5.2.0",

8
pnpm-lock.yaml generated
View File

@@ -1,7 +1,7 @@
lockfileVersion: 5.4 lockfileVersion: 5.4
specifiers: specifiers:
'@studio-freight/lenis': ^0.1.18 '@studio-freight/lenis': ^0.2.1
'@sveltejs/adapter-auto': ^1.0.0-next.72 '@sveltejs/adapter-auto': ^1.0.0-next.72
'@sveltejs/adapter-node': ^1.0.0-next.89 '@sveltejs/adapter-node': ^1.0.0-next.89
'@sveltejs/adapter-vercel': ^1.0.0-next.73 '@sveltejs/adapter-vercel': ^1.0.0-next.73
@@ -34,7 +34,7 @@ specifiers:
vite: ^3.1.0 vite: ^3.1.0
dependencies: dependencies:
'@studio-freight/lenis': 0.1.18 '@studio-freight/lenis': 0.2.1
dayjs: 1.11.5 dayjs: 1.11.5
embla-carousel: 7.0.2 embla-carousel: 7.0.2
focus-visible: 5.2.0 focus-visible: 5.2.0
@@ -424,8 +424,8 @@ packages:
picomatch: 2.3.1 picomatch: 2.3.1
dev: true dev: true
/@studio-freight/lenis/0.1.18: /@studio-freight/lenis/0.2.1:
resolution: {integrity: sha512-NLlkTD+hqbg1nYSvP7NY3dZcdKrMJCvDvsoGM1xbnfsTxGr/FnB6y/0Gu6CqoIWyPnRiUrMgafSgoQVWwfwQPg==} resolution: {integrity: sha512-U0H460uh3CXqVpEHBdmKWIp1s46U8FKOoNUumvETXx2OIZAjDTCmQOFsnMOca1lc3wEg5ghUYosCjbx99SHKAg==}
dependencies: dependencies:
tiny-emitter: 2.1.0 tiny-emitter: 2.1.0
virtual-scroll: 2.2.1 virtual-scroll: 2.2.1

7
src/components/SmoothScroll.svelte
View File

@@ -10,15 +10,16 @@
// Setup smooth scroll // Setup smooth scroll
if (browser) { if (browser) {
$smoothScroll = new Lenis({ $smoothScroll = new Lenis({
lerp: 0.1, duration: 1.2,
easing: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)), // https://easings.net/
smooth: true, smooth: true,
direction: 'vertical', direction: 'vertical',
}) })
} }
// Lenis RAF // Lenis RAF
const update = () => { const update = (time: number) => {
$smoothScroll.raf() $smoothScroll.raf(time)
smoothScrollRAF = requestAnimationFrame(update) smoothScrollRAF = requestAnimationFrame(update)
} }