From 486213ac77a60f9ba18b01028208a5f22c63b5a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Mon, 19 Sep 2022 20:09:28 +0200 Subject: [PATCH] Use Lenis to use smooth scroll to anchors --- package.json | 12 +- pnpm-lock.yaml | 127 +++++++++--------- src/components/molecules/Poster.svelte | 11 +- .../molecules/ShopLocationSwitcher.svelte | 4 +- src/components/organisms/ShopBanner.svelte | 4 +- src/routes/+page.svelte | 4 +- src/utils/functions/index.ts | 47 ------- 7 files changed, 80 insertions(+), 129 deletions(-) diff --git a/package.json b/package.json index ea479b2..b185815 100644 --- 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": [ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 52dfc19..0041e5e 100644 --- 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: diff --git a/src/components/molecules/Poster.svelte b/src/components/molecules/Poster.svelte index b3d279a..5309cc1 100644 --- a/src/components/molecules/Poster.svelte +++ b/src/components/molecules/Poster.svelte @@ -4,7 +4,7 @@ diff --git a/src/components/organisms/ShopBanner.svelte b/src/components/organisms/ShopBanner.svelte index 93f84e9..4b6e701 100644 --- 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 @@