From 0fe180b33fd575d978e4fb544acb73fb48d64ac1 Mon Sep 17 00:00:00 2001 From: Sangelo Date: Tue, 12 Mar 2024 20:43:58 +0100 Subject: [PATCH] Revert "Scroll Behaviour Changes using GSAP" This reverts commit 8e23062fa94e789475d23c5c52b8086ba1c424e3. --- package.json | 1 - src/lib/index.ts | 49 ++++++++--------------------------------- src/routes/+page.svelte | 32 +-------------------------- src/styles/index.scss | 4 ++-- yarn.lock | 5 ----- 5 files changed, 12 insertions(+), 79 deletions(-) diff --git a/package.json b/package.json index 6ca91d5..f68dd24 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,6 @@ }, "type": "module", "dependencies": { - "gsap": "^3.12.5", "md-block": "^0.0.1", "svelte-material-icons": "^3.0.5", "svelte-transition": "^0.0.10" diff --git a/src/lib/index.ts b/src/lib/index.ts index 16fc791..4905f7d 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -2,50 +2,19 @@ import { goto } from '$app/navigation'; -import { gsap } from 'gsap'; -import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin'; - -// export function smoothScrollTo(elementId: string) { -// const element = document.getElementById(elementId); -// if (element) { -// element.scrollIntoView({ -// behavior: 'smooth' -// }); -// } -// } - export function smoothScrollTo(elementId: string) { - gsap.registerPlugin(ScrollToPlugin); const element = document.getElementById(elementId); - if (!element) return; - - // Function to disable scrolling - const disableScroll = (event: Event) => event.preventDefault(); - - // Disable scrolling through various events - window.addEventListener('wheel', disableScroll, { passive: false }); - window.addEventListener('touchmove', disableScroll, { passive: false }); - window.addEventListener('keydown', (event) => { - // Prevent scrolling through spacebar, arrow keys, page up/down - if (['Space', 'PageUp', 'PageDown', 'ArrowUp', 'ArrowDown'].includes(event.code)) { - event.preventDefault(); - } - }, { passive: false }); - - gsap.to(window, { - scrollTo: { y: element, autoKill: false }, - duration: 0.1, - ease: "power4.out", - onComplete: () => { - // Re-enable scrolling after animation - window.removeEventListener('wheel', disableScroll); - window.removeEventListener('touchmove', disableScroll); - window.removeEventListener('keydown', disableScroll); - } - }); + if (element) { + element.scrollIntoView({ + behavior: 'smooth' + }); + } } - +// export function redirectToHome() { +// // goto('/'); +// smoothScrollTo('home'); +// } export function handleKeydown(event: KeyboardEvent) { // Trigger redirection on Enter key or Space bar diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 897d966..183aefd 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,39 +1,9 @@ @@ -46,4 +16,4 @@ + \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 017ad2b..0501abb 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,8 +2,8 @@ .container { height: 100vh; width: 100%; - // scroll-snap-type: y mandatory; - // overflow-y: scroll; + scroll-snap-type: y mandatory; + overflow-y: scroll; } .section { diff --git a/yarn.lock b/yarn.lock index b38a064..635ab42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -934,11 +934,6 @@ graphemer@^1.4.0: resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6" integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag== -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== - has-flag@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"