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

Use Lenis to use smooth scroll to anchors

Browse Source
This commit is contained in:
Félix Péault
2022-09-19 20:09:28 +02:00
parent f37a84d4f3
commit 486213ac77
7 changed files with 80 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package.json
View File

@@ -15,7 +15,7 @@
"lint": "eslint --ignore-path .gitignore ." "lint": "eslint --ignore-path .gitignore ."
}, },
"dependencies": { "dependencies": {
"@studio-freight/lenis": "^0.2.2", "@studio-freight/lenis": "^0.2.4",
"dayjs": "^1.11.5", "dayjs": "^1.11.5",
"embla-carousel": "^7.0.3", "embla-carousel": "^7.0.3",
"focus-visible": "^5.2.0", "focus-visible": "^5.2.0",
@@ -26,12 +26,12 @@
"tweakpane": "^3.1.0" "tweakpane": "^3.1.0"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^1.0.0-next.75", "@sveltejs/adapter-auto": "^1.0.0-next.76",
"@sveltejs/adapter-node": "^1.0.0-next.92", "@sveltejs/adapter-node": "^1.0.0-next.92",
"@sveltejs/adapter-vercel": "^1.0.0-next.76", "@sveltejs/adapter-vercel": "^1.0.0-next.76",
"@sveltejs/kit": "^1.0.0-next.484", "@sveltejs/kit": "^1.0.0-next.487",
"@typescript-eslint/eslint-plugin": "^5.37.0", "@typescript-eslint/eslint-plugin": "^5.38.0",
"@typescript-eslint/parser": "^5.37.0", "@typescript-eslint/parser": "^5.38.0",
"base-64": "^1.0.0", "base-64": "^1.0.0",
"browserslist": "^4.21.4", "browserslist": "^4.21.4",
"cssnano": "^5.1.13", "cssnano": "^5.1.13",
@@ -48,7 +48,7 @@
"svelte-preprocess": "^4.10.7", "svelte-preprocess": "^4.10.7",
"tslib": "^2.4.0", "tslib": "^2.4.0",
"typescript": "^4.8.3", "typescript": "^4.8.3",
"vite": "^3.1.2" "vite": "^3.1.3"
}, },
"type": "module", "type": "module",
"browserslist": [ "browserslist": [

127
pnpm-lock.yaml generated
View File

@@ -1,13 +1,13 @@
lockfileVersion: 5.4 lockfileVersion: 5.4
specifiers: specifiers:
'@studio-freight/lenis': ^0.2.2 '@studio-freight/lenis': ^0.2.4
'@sveltejs/adapter-auto': ^1.0.0-next.75 '@sveltejs/adapter-auto': ^1.0.0-next.76
'@sveltejs/adapter-node': ^1.0.0-next.92 '@sveltejs/adapter-node': ^1.0.0-next.92
'@sveltejs/adapter-vercel': ^1.0.0-next.76 '@sveltejs/adapter-vercel': ^1.0.0-next.76
'@sveltejs/kit': ^1.0.0-next.484 '@sveltejs/kit': ^1.0.0-next.487
'@typescript-eslint/eslint-plugin': ^5.37.0 '@typescript-eslint/eslint-plugin': ^5.38.0
'@typescript-eslint/parser': ^5.37.0 '@typescript-eslint/parser': ^5.38.0
base-64: ^1.0.0 base-64: ^1.0.0
browserslist: ^4.21.4 browserslist: ^4.21.4
cssnano: ^5.1.13 cssnano: ^5.1.13
@@ -32,10 +32,10 @@ specifiers:
tslib: ^2.4.0 tslib: ^2.4.0
tweakpane: ^3.1.0 tweakpane: ^3.1.0
typescript: ^4.8.3 typescript: ^4.8.3
vite: ^3.1.2 vite: ^3.1.3
dependencies: dependencies:
'@studio-freight/lenis': 0.2.2 '@studio-freight/lenis': 0.2.4
dayjs: 1.11.5 dayjs: 1.11.5
embla-carousel: 7.0.3 embla-carousel: 7.0.3
focus-visible: 5.2.0 focus-visible: 5.2.0
@@ -46,12 +46,12 @@ dependencies:
tweakpane: 3.1.0 tweakpane: 3.1.0
devDependencies: devDependencies:
'@sveltejs/adapter-auto': 1.0.0-next.75 '@sveltejs/adapter-auto': 1.0.0-next.76
'@sveltejs/adapter-node': 1.0.0-next.92 '@sveltejs/adapter-node': 1.0.0-next.92
'@sveltejs/adapter-vercel': 1.0.0-next.76 '@sveltejs/adapter-vercel': 1.0.0-next.76
'@sveltejs/kit': 1.0.0-next.484_svelte@3.50.1+vite@3.1.2 '@sveltejs/kit': 1.0.0-next.487_svelte@3.50.1+vite@3.1.3
'@typescript-eslint/eslint-plugin': 5.37.0_22c5fnooleyfkzrkkgdmel5kmi '@typescript-eslint/eslint-plugin': 5.38.0_wsb62dxj2oqwgas4kadjymcmry
'@typescript-eslint/parser': 5.37.0_irgkl5vooow2ydyo6aokmferha '@typescript-eslint/parser': 5.38.0_irgkl5vooow2ydyo6aokmferha
base-64: 1.0.0 base-64: 1.0.0
browserslist: 4.21.4 browserslist: 4.21.4
cssnano: 5.1.13_postcss@8.4.16 cssnano: 5.1.13_postcss@8.4.16
@@ -68,7 +68,7 @@ devDependencies:
svelte-preprocess: 4.10.7_52dhhvjbzvlifk77xwmrmntvea svelte-preprocess: 4.10.7_52dhhvjbzvlifk77xwmrmntvea
tslib: 2.4.0 tslib: 2.4.0
typescript: 4.8.3 typescript: 4.8.3
vite: 3.1.2_sass@1.54.9 vite: 3.1.3_sass@1.54.9
packages: packages:
@@ -428,17 +428,17 @@ packages:
picomatch: 2.3.1 picomatch: 2.3.1
dev: true dev: true
/@studio-freight/lenis/0.2.2: /@studio-freight/lenis/0.2.4:
resolution: {integrity: sha512-I5m2KIfNGil02MoHtazysSaj8aRneD54kKw/Egi0DriW/mJbWpAk44vGXD4mn1GkxPsCXuYAo7XA97l5QjZtvw==} resolution: {integrity: sha512-wVjnLJc+HiScTAWzn8MWAUcrXRNqGCbM5EwJ/Ub+Zen4VWEllxtkU1w8Tk2Lygonkx+q5LtHfYGVZqCmNzqVFw==}
dependencies: dependencies:
tiny-emitter: 2.1.0 tiny-emitter: 2.1.0
virtual-scroll: 2.2.1 virtual-scroll: 2.2.1
dev: false dev: false
/@sveltejs/adapter-auto/1.0.0-next.75: /@sveltejs/adapter-auto/1.0.0-next.76:
resolution: {integrity: sha512-UEE6XkeXVrNhpEceqcCbtfV5EYzulIt1D/L+RsjIVsPVtUIZMMpPWzuHHzVvPemFRAuYho+4C1hJjIJ9iCgPeQ==} resolution: {integrity: sha512-JPNBcQllucX0pqchYY8iD7adSKO+11C4fVT78zH6VupULirdYhns3R0npTXU63AoWO4FknpSY35GUhtyB4yEnA==}
dependencies: dependencies:
'@sveltejs/adapter-cloudflare': 1.0.0-next.34 '@sveltejs/adapter-cloudflare': 1.0.0-next.35
'@sveltejs/adapter-netlify': 1.0.0-next.78 '@sveltejs/adapter-netlify': 1.0.0-next.78
'@sveltejs/adapter-vercel': 1.0.0-next.76 '@sveltejs/adapter-vercel': 1.0.0-next.76
transitivePeerDependencies: transitivePeerDependencies:
@@ -446,8 +446,8 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@sveltejs/adapter-cloudflare/1.0.0-next.34: /@sveltejs/adapter-cloudflare/1.0.0-next.35:
resolution: {integrity: sha512-9/YJsx5O+iy2+XGuH0vVzZ9OSeHGjkInh8JG8CLmIc0cKkv2t7sEu7qQ/qXA5CcvmS1AqNSUgIMxGoeEDVlO3g==} resolution: {integrity: sha512-/o6kl2iLxiRGmhaf70fuVeMVP9S8OprmtOYcMj2QIWmpV5bdIXWJmZXLotrJUfipTroKf4sI8ULdjwf9HkQwoQ==}
dependencies: dependencies:
'@cloudflare/workers-types': 3.16.0 '@cloudflare/workers-types': 3.16.0
esbuild: 0.15.8 esbuild: 0.15.8
@@ -478,8 +478,8 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@sveltejs/kit/1.0.0-next.484_svelte@3.50.1+vite@3.1.2: /@sveltejs/kit/1.0.0-next.487_svelte@3.50.1+vite@3.1.3:
resolution: {integrity: sha512-Y3l8OmlgmfJX3m081rMUZmmEQWHtiSsj3+YWYK/CQ4V99jqoztXPz/4cAxUt5mC45jVF5Ee9ykmh6GzkYjvfAQ==} resolution: {integrity: sha512-DLrjiwrD0D2dUUL3ld4TFXhqdOHzhBW2C0vje70kuPZrbqq0sHZM2k+hYvgOf+r277N9AGfglve7RR4Ze08fDg==}
engines: {node: '>=16.14'} engines: {node: '>=16.14'}
hasBin: true hasBin: true
requiresBuild: true requiresBuild: true
@@ -487,7 +487,7 @@ packages:
svelte: ^3.44.0 svelte: ^3.44.0
vite: ^3.1.0 vite: ^3.1.0
dependencies: dependencies:
'@sveltejs/vite-plugin-svelte': 1.0.6_svelte@3.50.1+vite@3.1.2 '@sveltejs/vite-plugin-svelte': 1.0.7_svelte@3.50.1+vite@3.1.3
'@types/cookie': 0.5.1 '@types/cookie': 0.5.1
cookie: 0.5.0 cookie: 0.5.0
devalue: 3.1.3 devalue: 3.1.3
@@ -501,14 +501,14 @@ packages:
svelte: 3.50.1 svelte: 3.50.1
tiny-glob: 0.2.9 tiny-glob: 0.2.9
undici: 5.10.0 undici: 5.10.0
vite: 3.1.2_sass@1.54.9 vite: 3.1.3_sass@1.54.9
transitivePeerDependencies: transitivePeerDependencies:
- diff-match-patch - diff-match-patch
- supports-color - supports-color
dev: true dev: true
/@sveltejs/vite-plugin-svelte/1.0.6_svelte@3.50.1+vite@3.1.2: /@sveltejs/vite-plugin-svelte/1.0.7_svelte@3.50.1+vite@3.1.3:
resolution: {integrity: sha512-4VcYesosw2ekdsbx25ZbIcO2MueKLz5b3gWrimTDRTg4KF309ov/bLg8t5pk5v9C2dTrnyzzmPcITQ5dtjk+bw==} resolution: {integrity: sha512-bf3/xrpKP5Sj9I6hT0slYwY4rVElocWZ79zLPc/bPFCOjjuty0jW4hmC4Uehb7yifjf3I6QnT3eIs2EKqw+Kig==}
engines: {node: ^14.18.0 || >= 16} engines: {node: ^14.18.0 || >= 16}
peerDependencies: peerDependencies:
diff-match-patch: ^1.0.5 diff-match-patch: ^1.0.5
@@ -525,7 +525,7 @@ packages:
magic-string: 0.26.3 magic-string: 0.26.3
svelte: 3.50.1 svelte: 3.50.1
svelte-hmr: 0.15.0_svelte@3.50.1 svelte-hmr: 0.15.0_svelte@3.50.1
vite: 3.1.2_sass@1.54.9 vite: 3.1.3_sass@1.54.9
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: true dev: true
@@ -557,8 +557,8 @@ packages:
'@types/node': 18.7.18 '@types/node': 18.7.18
dev: true dev: true
/@typescript-eslint/eslint-plugin/5.37.0_22c5fnooleyfkzrkkgdmel5kmi: /@typescript-eslint/eslint-plugin/5.38.0_wsb62dxj2oqwgas4kadjymcmry:
resolution: {integrity: sha512-Fde6W0IafXktz1UlnhGkrrmnnGpAo1kyX7dnyHHVrmwJOn72Oqm3eYtddrpOwwel2W8PAK9F3pIL5S+lfoM0og==} resolution: {integrity: sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
'@typescript-eslint/parser': ^5.0.0 '@typescript-eslint/parser': ^5.0.0
@@ -568,13 +568,12 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/parser': 5.37.0_irgkl5vooow2ydyo6aokmferha '@typescript-eslint/parser': 5.38.0_irgkl5vooow2ydyo6aokmferha
'@typescript-eslint/scope-manager': 5.37.0 '@typescript-eslint/scope-manager': 5.38.0
'@typescript-eslint/type-utils': 5.37.0_irgkl5vooow2ydyo6aokmferha '@typescript-eslint/type-utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
'@typescript-eslint/utils': 5.37.0_irgkl5vooow2ydyo6aokmferha '@typescript-eslint/utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
debug: 4.3.4 debug: 4.3.4
eslint: 8.23.1 eslint: 8.23.1
functional-red-black-tree: 1.0.1
ignore: 5.2.0 ignore: 5.2.0
regexpp: 3.2.0 regexpp: 3.2.0
semver: 7.3.7 semver: 7.3.7
@@ -584,8 +583,8 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/parser/5.37.0_irgkl5vooow2ydyo6aokmferha: /@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha:
resolution: {integrity: sha512-01VzI/ipYKuaG5PkE5+qyJ6m02fVALmMPY3Qq5BHflDx3y4VobbLdHQkSMg9VPRS4KdNt4oYTMaomFoHonBGAw==} resolution: {integrity: sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -594,9 +593,9 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/scope-manager': 5.37.0 '@typescript-eslint/scope-manager': 5.38.0
'@typescript-eslint/types': 5.37.0 '@typescript-eslint/types': 5.38.0
'@typescript-eslint/typescript-estree': 5.37.0_typescript@4.8.3 '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
debug: 4.3.4 debug: 4.3.4
eslint: 8.23.1 eslint: 8.23.1
typescript: 4.8.3 typescript: 4.8.3
@@ -604,16 +603,16 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/scope-manager/5.37.0: /@typescript-eslint/scope-manager/5.38.0:
resolution: {integrity: sha512-F67MqrmSXGd/eZnujjtkPgBQzgespu/iCZ+54Ok9X5tALb9L2v3G+QBSoWkXG0p3lcTJsL+iXz5eLUEdSiJU9Q==} resolution: {integrity: sha512-ByhHIuNyKD9giwkkLqzezZ9y5bALW8VNY6xXcP+VxoH4JBDKjU5WNnsiD4HJdglHECdV+lyaxhvQjTUbRboiTA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
'@typescript-eslint/types': 5.37.0 '@typescript-eslint/types': 5.38.0
'@typescript-eslint/visitor-keys': 5.37.0 '@typescript-eslint/visitor-keys': 5.38.0
dev: true dev: true
/@typescript-eslint/type-utils/5.37.0_irgkl5vooow2ydyo6aokmferha: /@typescript-eslint/type-utils/5.38.0_irgkl5vooow2ydyo6aokmferha:
resolution: {integrity: sha512-BSx/O0Z0SXOF5tY0bNTBcDEKz2Ec20GVYvq/H/XNKiUorUFilH7NPbFUuiiyzWaSdN3PA8JV0OvYx0gH/5aFAQ==} resolution: {integrity: sha512-iZq5USgybUcj/lfnbuelJ0j3K9dbs1I3RICAJY9NZZpDgBYXmuUlYQGzftpQA9wC8cKgtS6DASTvF3HrXwwozA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
eslint: '*' eslint: '*'
@@ -622,8 +621,8 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/typescript-estree': 5.37.0_typescript@4.8.3 '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
'@typescript-eslint/utils': 5.37.0_irgkl5vooow2ydyo6aokmferha '@typescript-eslint/utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
debug: 4.3.4 debug: 4.3.4
eslint: 8.23.1 eslint: 8.23.1
tsutils: 3.21.0_typescript@4.8.3 tsutils: 3.21.0_typescript@4.8.3
@@ -632,13 +631,13 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/types/5.37.0: /@typescript-eslint/types/5.38.0:
resolution: {integrity: sha512-3frIJiTa5+tCb2iqR/bf7XwU20lnU05r/sgPJnRpwvfZaqCJBrl8Q/mw9vr3NrNdB/XtVyMA0eppRMMBqdJ1bA==} resolution: {integrity: sha512-HHu4yMjJ7i3Cb+8NUuRCdOGu2VMkfmKyIJsOr9PfkBVYLYrtMCK/Ap50Rpov+iKpxDTfnqvDbuPLgBE5FwUNfA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dev: true dev: true
/@typescript-eslint/typescript-estree/5.37.0_typescript@4.8.3: /@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3:
resolution: {integrity: sha512-JkFoFIt/cx59iqEDSgIGnQpCTRv96MQnXCYvJi7QhBC24uyuzbD8wVbajMB1b9x4I0octYFJ3OwjAwNqk1AjDA==} resolution: {integrity: sha512-6P0RuphkR+UuV7Avv7MU3hFoWaGcrgOdi8eTe1NwhMp2/GjUJoODBTRWzlHpZh6lFOaPmSvgxGlROa0Sg5Zbyg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
typescript: '*' typescript: '*'
@@ -646,8 +645,8 @@ packages:
typescript: typescript:
optional: true optional: true
dependencies: dependencies:
'@typescript-eslint/types': 5.37.0 '@typescript-eslint/types': 5.38.0
'@typescript-eslint/visitor-keys': 5.37.0 '@typescript-eslint/visitor-keys': 5.38.0
debug: 4.3.4 debug: 4.3.4
globby: 11.1.0 globby: 11.1.0
is-glob: 4.0.3 is-glob: 4.0.3
@@ -658,16 +657,16 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@typescript-eslint/utils/5.37.0_irgkl5vooow2ydyo6aokmferha: /@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha:
resolution: {integrity: sha512-jUEJoQrWbZhmikbcWSMDuUSxEE7ID2W/QCV/uz10WtQqfOuKZUqFGjqLJ+qhDd17rjgp+QJPqTdPIBWwoob2NQ==} resolution: {integrity: sha512-6sdeYaBgk9Fh7N2unEXGz+D+som2QCQGPAf1SxrkEr+Z32gMreQ0rparXTNGRRfYUWk/JzbGdcM8NSSd6oqnTA==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
dependencies: dependencies:
'@types/json-schema': 7.0.11 '@types/json-schema': 7.0.11
'@typescript-eslint/scope-manager': 5.37.0 '@typescript-eslint/scope-manager': 5.38.0
'@typescript-eslint/types': 5.37.0 '@typescript-eslint/types': 5.38.0
'@typescript-eslint/typescript-estree': 5.37.0_typescript@4.8.3 '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
eslint: 8.23.1 eslint: 8.23.1
eslint-scope: 5.1.1 eslint-scope: 5.1.1
eslint-utils: 3.0.0_eslint@8.23.1 eslint-utils: 3.0.0_eslint@8.23.1
@@ -676,11 +675,11 @@ packages:
- typescript - typescript
dev: true dev: true
/@typescript-eslint/visitor-keys/5.37.0: /@typescript-eslint/visitor-keys/5.38.0:
resolution: {integrity: sha512-Hp7rT4cENBPIzMwrlehLW/28EVCOcE9U1Z1BQTc8EA8v5qpr7GRGuG+U58V5tTY48zvUOA3KHvw3rA8tY9fbdA==} resolution: {integrity: sha512-MxnrdIyArnTi+XyFLR+kt/uNAcdOnmT+879os7qDRI+EYySR4crXJq9BXPfRzzLGq0wgxkwidrCJ9WCAoacm1w==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
dependencies: dependencies:
'@typescript-eslint/types': 5.37.0 '@typescript-eslint/types': 5.38.0
eslint-visitor-keys: 3.3.0 eslint-visitor-keys: 3.3.0
dev: true dev: true
@@ -1683,10 +1682,6 @@ packages:
/function-bind/1.1.1: /function-bind/1.1.1:
resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
/functional-red-black-tree/1.0.1:
resolution: {integrity: sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==}
dev: true
/gauge/3.0.2: /gauge/3.0.2:
resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==} resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
engines: {node: '>=10'} engines: {node: '>=10'}
@@ -3441,8 +3436,8 @@ packages:
tiny-emitter: 2.1.0 tiny-emitter: 2.1.0
dev: false dev: false
/vite/3.1.2_sass@1.54.9: /vite/3.1.3_sass@1.54.9:
resolution: {integrity: sha512-wTDKPkiVbeT+drTPdkuvjVIC/2vKKUc1w3qNOuwgpyvPCZF6fvdxB5v5WEcCsqaYea0zrwA4+XialJKCHM3oVQ==} resolution: {integrity: sha512-/3XWiktaopByM5bd8dqvHxRt5EEgRikevnnrpND0gRfNkrMrPaGGexhtLCzv15RcCMtV2CLw+BPas8YFeSG0KA==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true hasBin: true
peerDependencies: peerDependencies:

11
src/components/molecules/Poster.svelte
View File

@@ -4,7 +4,7 @@
<script lang="ts"> <script lang="ts">
import { addToCart } from '$utils/functions/shop' import { addToCart } from '$utils/functions/shop'
import { smoothScroll } from '$utils/functions' import { smoothScroll } from '$utils/stores'
// Components // Components
import Button from '$components/atoms/Button.svelte' import Button from '$components/atoms/Button.svelte'
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'
@@ -16,7 +16,9 @@
<div class="poster"> <div class="poster">
{#if image} {#if image}
<a href="/shop/poster-{location.slug}" on:click={() => smoothScroll({ hash: 'poster', changeHash: false })} data-sveltekit-noscroll data-sveltekit-prefetch> <a href="/shop/poster-{location.slug}" data-sveltekit-noscroll data-sveltekit-prefetch
on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}
>
<Image <Image
id={image.id} id={image.id}
sizeKey="product" sizeKey="product"
@@ -35,7 +37,10 @@
size="xsmall" size="xsmall"
url="/shop/poster-{location.slug}" url="/shop/poster-{location.slug}"
text="View" text="View"
on:click={() => setTimeout(() => smoothScroll({ hash: 'poster', changeHash: false }), 1000)} on:click={(event) => {
event.preventDefault()
setTimeout(() => $smoothScroll.scrollTo('#poster', { duration: 2 }), 1000)
}}
/> />
<Button <Button
tag="button" tag="button"

4
src/components/molecules/ShopLocationSwitcher.svelte
View File

@@ -26,9 +26,7 @@
// Scroll to anchor // Scroll to anchor
await tick() await tick()
$smoothScroll.scrollTo(document.getElementById('poster').offsetTop, { $smoothScroll.scrollTo('#poster', { duration: 2 })
duration: 2
})
} }
</script> </script>

4
src/components/organisms/ShopBanner.svelte
View File

@@ -6,8 +6,8 @@
import { navigating } from '$app/stores' import { navigating } from '$app/stores'
import { getContext, onMount } from 'svelte' import { getContext, onMount } from 'svelte'
import { stagger, timeline } from 'motion' import { stagger, timeline } from 'motion'
import { smoothScroll } from '$utils/stores'
import { cartOpen } from '$utils/stores/shop' import { cartOpen } from '$utils/stores/shop'
import { smoothScroll } from '$utils/functions'
import { DELAY } from '$utils/contants' import { DELAY } from '$utils/contants'
import { quartOut } from '$animations/easings' import { quartOut } from '$animations/easings'
// Components // Components
@@ -117,7 +117,7 @@
<ul data-sveltekit-noscroll data-sveltekit-prefetch> <ul data-sveltekit-noscroll data-sveltekit-prefetch>
{#each shopLocations as { name, slug }} {#each shopLocations as { name, slug }}
<li class:is-active={product && slug === product.location.slug}> <li class:is-active={product && slug === product.location.slug}>
<a href="/shop/poster-{slug}" on:click={() => smoothScroll({ hash: 'poster' })}> <a href="/shop/poster-{slug}" on:click={() => $smoothScroll.scrollTo('#poster', { duration: 2 })}>
{name} {name}
</a> </a>
</li> </li>

4
src/routes/+page.svelte
View File

@@ -8,7 +8,7 @@
import { getContext, onMount } from 'svelte' import { getContext, onMount } from 'svelte'
import { timeline, stagger } from 'motion' import { timeline, stagger } from 'motion'
import { DELAY } from '$utils/contants' import { DELAY } from '$utils/contants'
import { smoothScroll } from '$utils/functions' import { smoothScroll } from '$utils/stores'
import { getAssetUrlKey } from '$utils/api' import { getAssetUrlKey } from '$utils/api'
import reveal from '$animations/reveal' import reveal from '$animations/reveal'
import { quartOut } from '$animations/easings' import { quartOut } from '$animations/easings'
@@ -105,7 +105,7 @@
{settings.description} {settings.description}
</p> </p>
<Button url="#locations" text="Explore locations" on:click={event => smoothScroll({ hash: 'locations', event })}> <Button url="#locations" text="Explore locations" on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}>
<IconEarth animate={true} /> <IconEarth animate={true} />
</Button> </Button>
</div> </div>

47
src/utils/functions/index.ts
View File

@@ -155,53 +155,6 @@ export const scrollToTop = (delay?: number) => {
} }
/**
* Smooth Scroll to an element
* @description Promised based
* @url Based on: https://www.youtube.com/watch?v=oUSvlrDTLi4
*/
const smoothScrollPromise = (target: HTMLElement, duration: number = 1600): Promise<void> => {
const position = target.getBoundingClientRect().top + 1
const startPosition = window.scrollY
const distance = position - startPosition
let startTime: number = null
// Return Promise
return new Promise((resolve) => {
if (!(target instanceof Element)) throw new TypeError('Argument 1 must be an Element')
if (typeof window === 'undefined') return
// Scroll to animation
const animation = (currentTime: number) => {
if (startTime === null) startTime = currentTime
const timeElapsed = currentTime - startTime
// Create easing value
const easedYPosition = quartInOutFunc(timeElapsed, startPosition, distance, duration)
// Scroll to Y position
window.scrollTo(0, easedYPosition)
// Loop or end animation
if (timeElapsed < duration) {
requestAnimationFrame(animation)
} else {
return resolve()
}
}
requestAnimationFrame(animation)
})
}
export const smoothScroll = async ({ hash, callback, changeHash = true, event }: smoothScrollOptions) => {
if (event) event.preventDefault()
const target = document.getElementById(hash)
smoothScrollPromise(target).then(() => {
if (changeHash) location.hash = hash
callback && callback()
})
}
/** /**
* Copy mailto links to clipboard and show message * Copy mailto links to clipboard and show message
*/ */