Use Lenis to use smooth scroll to anchors

2022-09-19 20:09:28 +02:00
parent f37a84d4f3
commit 486213ac77
7 changed files with 80 additions and 129 deletions
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
    "lint": "eslint --ignore-path .gitignore ."
  },
  "dependencies": {
-    "@studio-freight/lenis": "^0.2.2",
+    "@studio-freight/lenis": "^0.2.4",
    "dayjs": "^1.11.5",
    "embla-carousel": "^7.0.3",
    "focus-visible": "^5.2.0",
@@ -26,12 +26,12 @@
    "tweakpane": "^3.1.0"
  },
  "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-vercel": "^1.0.0-next.76",
-    "@sveltejs/kit": "^1.0.0-next.484",
-    "@typescript-eslint/eslint-plugin": "^5.37.0",
-    "@typescript-eslint/parser": "^5.37.0",
+    "@sveltejs/kit": "^1.0.0-next.487",
+    "@typescript-eslint/eslint-plugin": "^5.38.0",
+    "@typescript-eslint/parser": "^5.38.0",
    "base-64": "^1.0.0",
    "browserslist": "^4.21.4",
    "cssnano": "^5.1.13",
@@ -48,7 +48,7 @@
    "svelte-preprocess": "^4.10.7",
    "tslib": "^2.4.0",
    "typescript": "^4.8.3",
-    "vite": "^3.1.2"
+    "vite": "^3.1.3"
  },
  "type": "module",
  "browserslist": [
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,13 +1,13 @@
 lockfileVersion: 5.4

 specifiers:
-  '@studio-freight/lenis': ^0.2.2
-  '@sveltejs/adapter-auto': ^1.0.0-next.75
+  '@studio-freight/lenis': ^0.2.4
+  '@sveltejs/adapter-auto': ^1.0.0-next.76
  '@sveltejs/adapter-node': ^1.0.0-next.92
  '@sveltejs/adapter-vercel': ^1.0.0-next.76
-  '@sveltejs/kit': ^1.0.0-next.484
-  '@typescript-eslint/eslint-plugin': ^5.37.0
-  '@typescript-eslint/parser': ^5.37.0
+  '@sveltejs/kit': ^1.0.0-next.487
+  '@typescript-eslint/eslint-plugin': ^5.38.0
+  '@typescript-eslint/parser': ^5.38.0
  base-64: ^1.0.0
  browserslist: ^4.21.4
  cssnano: ^5.1.13
@@ -32,10 +32,10 @@ specifiers:
  tslib: ^2.4.0
  tweakpane: ^3.1.0
  typescript: ^4.8.3
-  vite: ^3.1.2
+  vite: ^3.1.3

 dependencies:
-  '@studio-freight/lenis': 0.2.2
+  '@studio-freight/lenis': 0.2.4
  dayjs: 1.11.5
  embla-carousel: 7.0.3
  focus-visible: 5.2.0
@@ -46,12 +46,12 @@ dependencies:
  tweakpane: 3.1.0

 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-vercel': 1.0.0-next.76
-  '@sveltejs/kit': 1.0.0-next.484_svelte@3.50.1+vite@3.1.2
-  '@typescript-eslint/eslint-plugin': 5.37.0_22c5fnooleyfkzrkkgdmel5kmi
-  '@typescript-eslint/parser': 5.37.0_irgkl5vooow2ydyo6aokmferha
+  '@sveltejs/kit': 1.0.0-next.487_svelte@3.50.1+vite@3.1.3
+  '@typescript-eslint/eslint-plugin': 5.38.0_wsb62dxj2oqwgas4kadjymcmry
+  '@typescript-eslint/parser': 5.38.0_irgkl5vooow2ydyo6aokmferha
  base-64: 1.0.0
  browserslist: 4.21.4
  cssnano: 5.1.13_postcss@8.4.16
@@ -68,7 +68,7 @@ devDependencies:
  svelte-preprocess: 4.10.7_52dhhvjbzvlifk77xwmrmntvea
  tslib: 2.4.0
  typescript: 4.8.3
-  vite: 3.1.2_sass@1.54.9
+  vite: 3.1.3_sass@1.54.9

 packages:

@@ -428,17 +428,17 @@ packages:
      picomatch: 2.3.1
    dev: true

-  /@studio-freight/lenis/0.2.2:
-    resolution: {integrity: sha512-I5m2KIfNGil02MoHtazysSaj8aRneD54kKw/Egi0DriW/mJbWpAk44vGXD4mn1GkxPsCXuYAo7XA97l5QjZtvw==}
+  /@studio-freight/lenis/0.2.4:
+    resolution: {integrity: sha512-wVjnLJc+HiScTAWzn8MWAUcrXRNqGCbM5EwJ/Ub+Zen4VWEllxtkU1w8Tk2Lygonkx+q5LtHfYGVZqCmNzqVFw==}
    dependencies:
      tiny-emitter: 2.1.0
      virtual-scroll: 2.2.1
    dev: false

-  /@sveltejs/adapter-auto/1.0.0-next.75:
-    resolution: {integrity: sha512-UEE6XkeXVrNhpEceqcCbtfV5EYzulIt1D/L+RsjIVsPVtUIZMMpPWzuHHzVvPemFRAuYho+4C1hJjIJ9iCgPeQ==}
+  /@sveltejs/adapter-auto/1.0.0-next.76:
+    resolution: {integrity: sha512-JPNBcQllucX0pqchYY8iD7adSKO+11C4fVT78zH6VupULirdYhns3R0npTXU63AoWO4FknpSY35GUhtyB4yEnA==}
    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-vercel': 1.0.0-next.76
    transitivePeerDependencies:
@@ -446,8 +446,8 @@ packages:
      - supports-color
    dev: true

-  /@sveltejs/adapter-cloudflare/1.0.0-next.34:
-    resolution: {integrity: sha512-9/YJsx5O+iy2+XGuH0vVzZ9OSeHGjkInh8JG8CLmIc0cKkv2t7sEu7qQ/qXA5CcvmS1AqNSUgIMxGoeEDVlO3g==}
+  /@sveltejs/adapter-cloudflare/1.0.0-next.35:
+    resolution: {integrity: sha512-/o6kl2iLxiRGmhaf70fuVeMVP9S8OprmtOYcMj2QIWmpV5bdIXWJmZXLotrJUfipTroKf4sI8ULdjwf9HkQwoQ==}
    dependencies:
      '@cloudflare/workers-types': 3.16.0
      esbuild: 0.15.8
@@ -478,8 +478,8 @@ packages:
      - supports-color
    dev: true

-  /@sveltejs/kit/1.0.0-next.484_svelte@3.50.1+vite@3.1.2:
-    resolution: {integrity: sha512-Y3l8OmlgmfJX3m081rMUZmmEQWHtiSsj3+YWYK/CQ4V99jqoztXPz/4cAxUt5mC45jVF5Ee9ykmh6GzkYjvfAQ==}
+  /@sveltejs/kit/1.0.0-next.487_svelte@3.50.1+vite@3.1.3:
+    resolution: {integrity: sha512-DLrjiwrD0D2dUUL3ld4TFXhqdOHzhBW2C0vje70kuPZrbqq0sHZM2k+hYvgOf+r277N9AGfglve7RR4Ze08fDg==}
    engines: {node: '>=16.14'}
    hasBin: true
    requiresBuild: true
@@ -487,7 +487,7 @@ packages:
      svelte: ^3.44.0
      vite: ^3.1.0
    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
      cookie: 0.5.0
      devalue: 3.1.3
@@ -501,14 +501,14 @@ packages:
      svelte: 3.50.1
      tiny-glob: 0.2.9
      undici: 5.10.0
-      vite: 3.1.2_sass@1.54.9
+      vite: 3.1.3_sass@1.54.9
    transitivePeerDependencies:
      - diff-match-patch
      - supports-color
    dev: true

-  /@sveltejs/vite-plugin-svelte/1.0.6_svelte@3.50.1+vite@3.1.2:
-    resolution: {integrity: sha512-4VcYesosw2ekdsbx25ZbIcO2MueKLz5b3gWrimTDRTg4KF309ov/bLg8t5pk5v9C2dTrnyzzmPcITQ5dtjk+bw==}
+  /@sveltejs/vite-plugin-svelte/1.0.7_svelte@3.50.1+vite@3.1.3:
+    resolution: {integrity: sha512-bf3/xrpKP5Sj9I6hT0slYwY4rVElocWZ79zLPc/bPFCOjjuty0jW4hmC4Uehb7yifjf3I6QnT3eIs2EKqw+Kig==}
    engines: {node: ^14.18.0 || >= 16}
    peerDependencies:
      diff-match-patch: ^1.0.5
@@ -525,7 +525,7 @@ packages:
      magic-string: 0.26.3
      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:
      - supports-color
    dev: true
@@ -557,8 +557,8 @@ packages:
      '@types/node': 18.7.18
    dev: true

-  /@typescript-eslint/eslint-plugin/5.37.0_22c5fnooleyfkzrkkgdmel5kmi:
-    resolution: {integrity: sha512-Fde6W0IafXktz1UlnhGkrrmnnGpAo1kyX7dnyHHVrmwJOn72Oqm3eYtddrpOwwel2W8PAK9F3pIL5S+lfoM0og==}
+  /@typescript-eslint/eslint-plugin/5.38.0_wsb62dxj2oqwgas4kadjymcmry:
+    resolution: {integrity: sha512-GgHi/GNuUbTOeoJiEANi0oI6fF3gBQc3bGFYj40nnAPCbhrtEDf2rjBmefFadweBmO1Du1YovHeDP2h5JLhtTQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      '@typescript-eslint/parser': ^5.0.0
@@ -568,13 +568,12 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/parser': 5.37.0_irgkl5vooow2ydyo6aokmferha
-      '@typescript-eslint/scope-manager': 5.37.0
-      '@typescript-eslint/type-utils': 5.37.0_irgkl5vooow2ydyo6aokmferha
-      '@typescript-eslint/utils': 5.37.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/parser': 5.38.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/scope-manager': 5.38.0
+      '@typescript-eslint/type-utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
      debug: 4.3.4
      eslint: 8.23.1
-      functional-red-black-tree: 1.0.1
      ignore: 5.2.0
      regexpp: 3.2.0
      semver: 7.3.7
@@ -584,8 +583,8 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/parser/5.37.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-01VzI/ipYKuaG5PkE5+qyJ6m02fVALmMPY3Qq5BHflDx3y4VobbLdHQkSMg9VPRS4KdNt4oYTMaomFoHonBGAw==}
+  /@typescript-eslint/parser/5.38.0_irgkl5vooow2ydyo6aokmferha:
+    resolution: {integrity: sha512-/F63giJGLDr0ms1Cr8utDAxP2SPiglaD6V+pCOcG35P2jCqdfR7uuEhz1GIC3oy4hkUF8xA1XSXmd9hOh/a5EA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -594,9 +593,9 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/scope-manager': 5.37.0
-      '@typescript-eslint/types': 5.37.0
-      '@typescript-eslint/typescript-estree': 5.37.0_typescript@4.8.3
+      '@typescript-eslint/scope-manager': 5.38.0
+      '@typescript-eslint/types': 5.38.0
+      '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
      debug: 4.3.4
      eslint: 8.23.1
      typescript: 4.8.3
@@ -604,16 +603,16 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/scope-manager/5.37.0:
-    resolution: {integrity: sha512-F67MqrmSXGd/eZnujjtkPgBQzgespu/iCZ+54Ok9X5tALb9L2v3G+QBSoWkXG0p3lcTJsL+iXz5eLUEdSiJU9Q==}
+  /@typescript-eslint/scope-manager/5.38.0:
+    resolution: {integrity: sha512-ByhHIuNyKD9giwkkLqzezZ9y5bALW8VNY6xXcP+VxoH4JBDKjU5WNnsiD4HJdglHECdV+lyaxhvQjTUbRboiTA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': 5.37.0
-      '@typescript-eslint/visitor-keys': 5.37.0
+      '@typescript-eslint/types': 5.38.0
+      '@typescript-eslint/visitor-keys': 5.38.0
    dev: true

-  /@typescript-eslint/type-utils/5.37.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-BSx/O0Z0SXOF5tY0bNTBcDEKz2Ec20GVYvq/H/XNKiUorUFilH7NPbFUuiiyzWaSdN3PA8JV0OvYx0gH/5aFAQ==}
+  /@typescript-eslint/type-utils/5.38.0_irgkl5vooow2ydyo6aokmferha:
+    resolution: {integrity: sha512-iZq5USgybUcj/lfnbuelJ0j3K9dbs1I3RICAJY9NZZpDgBYXmuUlYQGzftpQA9wC8cKgtS6DASTvF3HrXwwozA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: '*'
@@ -622,8 +621,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/typescript-estree': 5.37.0_typescript@4.8.3
-      '@typescript-eslint/utils': 5.37.0_irgkl5vooow2ydyo6aokmferha
+      '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
+      '@typescript-eslint/utils': 5.38.0_irgkl5vooow2ydyo6aokmferha
      debug: 4.3.4
      eslint: 8.23.1
      tsutils: 3.21.0_typescript@4.8.3
@@ -632,13 +631,13 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/types/5.37.0:
-    resolution: {integrity: sha512-3frIJiTa5+tCb2iqR/bf7XwU20lnU05r/sgPJnRpwvfZaqCJBrl8Q/mw9vr3NrNdB/XtVyMA0eppRMMBqdJ1bA==}
+  /@typescript-eslint/types/5.38.0:
+    resolution: {integrity: sha512-HHu4yMjJ7i3Cb+8NUuRCdOGu2VMkfmKyIJsOr9PfkBVYLYrtMCK/Ap50Rpov+iKpxDTfnqvDbuPLgBE5FwUNfA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  /@typescript-eslint/typescript-estree/5.37.0_typescript@4.8.3:
-    resolution: {integrity: sha512-JkFoFIt/cx59iqEDSgIGnQpCTRv96MQnXCYvJi7QhBC24uyuzbD8wVbajMB1b9x4I0octYFJ3OwjAwNqk1AjDA==}
+  /@typescript-eslint/typescript-estree/5.38.0_typescript@4.8.3:
+    resolution: {integrity: sha512-6P0RuphkR+UuV7Avv7MU3hFoWaGcrgOdi8eTe1NwhMp2/GjUJoODBTRWzlHpZh6lFOaPmSvgxGlROa0Sg5Zbyg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      typescript: '*'
@@ -646,8 +645,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/types': 5.37.0
-      '@typescript-eslint/visitor-keys': 5.37.0
+      '@typescript-eslint/types': 5.38.0
+      '@typescript-eslint/visitor-keys': 5.38.0
      debug: 4.3.4
      globby: 11.1.0
      is-glob: 4.0.3
@@ -658,16 +657,16 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/utils/5.37.0_irgkl5vooow2ydyo6aokmferha:
-    resolution: {integrity: sha512-jUEJoQrWbZhmikbcWSMDuUSxEE7ID2W/QCV/uz10WtQqfOuKZUqFGjqLJ+qhDd17rjgp+QJPqTdPIBWwoob2NQ==}
+  /@typescript-eslint/utils/5.38.0_irgkl5vooow2ydyo6aokmferha:
+    resolution: {integrity: sha512-6sdeYaBgk9Fh7N2unEXGz+D+som2QCQGPAf1SxrkEr+Z32gMreQ0rparXTNGRRfYUWk/JzbGdcM8NSSd6oqnTA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
    dependencies:
      '@types/json-schema': 7.0.11
-      '@typescript-eslint/scope-manager': 5.37.0
-      '@typescript-eslint/types': 5.37.0
-      '@typescript-eslint/typescript-estree': 5.37.0_typescript@4.8.3
+      '@typescript-eslint/scope-manager': 5.38.0
+      '@typescript-eslint/types': 5.38.0
+      '@typescript-eslint/typescript-estree': 5.38.0_typescript@4.8.3
      eslint: 8.23.1
      eslint-scope: 5.1.1
      eslint-utils: 3.0.0_eslint@8.23.1
@@ -676,11 +675,11 @@ packages:
      - typescript
    dev: true

-  /@typescript-eslint/visitor-keys/5.37.0:
-    resolution: {integrity: sha512-Hp7rT4cENBPIzMwrlehLW/28EVCOcE9U1Z1BQTc8EA8v5qpr7GRGuG+U58V5tTY48zvUOA3KHvw3rA8tY9fbdA==}
+  /@typescript-eslint/visitor-keys/5.38.0:
+    resolution: {integrity: sha512-MxnrdIyArnTi+XyFLR+kt/uNAcdOnmT+879os7qDRI+EYySR4crXJq9BXPfRzzLGq0wgxkwidrCJ9WCAoacm1w==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': 5.37.0
+      '@typescript-eslint/types': 5.38.0
      eslint-visitor-keys: 3.3.0
    dev: true

@@ -1683,10 +1682,6 @@ packages:
  /function-bind/1.1.1:
    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:
    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
    engines: {node: '>=10'}
@@ -3441,8 +3436,8 @@ packages:
      tiny-emitter: 2.1.0
    dev: false

-  /vite/3.1.2_sass@1.54.9:
-    resolution: {integrity: sha512-wTDKPkiVbeT+drTPdkuvjVIC/2vKKUc1w3qNOuwgpyvPCZF6fvdxB5v5WEcCsqaYea0zrwA4+XialJKCHM3oVQ==}
+  /vite/3.1.3_sass@1.54.9:
+    resolution: {integrity: sha512-/3XWiktaopByM5bd8dqvHxRt5EEgRikevnnrpND0gRfNkrMrPaGGexhtLCzv15RcCMtV2CLw+BPas8YFeSG0KA==}
    engines: {node: ^14.18.0 || >=16.0.0}
    hasBin: true
    peerDependencies:
--- a/src/components/molecules/Poster.svelte
+++ b/src/components/molecules/Poster.svelte
@@ -4,7 +4,7 @@

 <script lang="ts">
    import { addToCart } from '$utils/functions/shop'
-    import { smoothScroll } from '$utils/functions'
+    import { smoothScroll } from '$utils/stores'
    // Components
    import Button from '$components/atoms/Button.svelte'
    import Image from '$components/atoms/Image.svelte'
@@ -16,7 +16,9 @@

 <div class="poster">
    {#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
                id={image.id}
                sizeKey="product"
@@ -35,7 +37,10 @@
            size="xsmall"
            url="/shop/poster-{location.slug}"
            text="View"
-            on:click={() => setTimeout(() => smoothScroll({ hash: 'poster', changeHash: false }), 1000)}
+            on:click={(event) => {
+                event.preventDefault()
+                setTimeout(() => $smoothScroll.scrollTo('#poster', { duration: 2 }), 1000)
+            }}
        />
        <Button
            tag="button"
--- a/src/components/molecules/ShopLocationSwitcher.svelte
+++ b/src/components/molecules/ShopLocationSwitcher.svelte
@@ -26,9 +26,7 @@

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

--- a/src/components/organisms/ShopBanner.svelte
+++ b/src/components/organisms/ShopBanner.svelte
@@ -6,8 +6,8 @@
    import { navigating } from '$app/stores'
    import { getContext, onMount } from 'svelte'
    import { stagger, timeline } from 'motion'
+    import { smoothScroll } from '$utils/stores'
    import { cartOpen } from '$utils/stores/shop'
-    import { smoothScroll } from '$utils/functions'
    import { DELAY } from '$utils/contants'
    import { quartOut } from '$animations/easings'
    // Components
@@ -117,7 +117,7 @@
                <ul data-sveltekit-noscroll data-sveltekit-prefetch>
                    {#each shopLocations as { name, 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}
                            </a>
                        </li>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,7 +8,7 @@
    import { getContext, onMount } from 'svelte'
    import { timeline, stagger } from 'motion'
    import { DELAY } from '$utils/contants'
-    import { smoothScroll } from '$utils/functions'
+    import { smoothScroll } from '$utils/stores'
    import { getAssetUrlKey } from '$utils/api'
    import reveal from '$animations/reveal'
    import { quartOut } from '$animations/easings'
@@ -105,7 +105,7 @@
                {settings.description}
            </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} />
            </Button>
        </div>
--- a/src/utils/functions/index.ts
+++ b/src/utils/functions/index.ts
@@ -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
 */