sangelo/website
sangelo/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Revert "Scroll Behaviour Changes using GSAP"

Browse source 
This reverts commit 8e23062fa9.
This commit is contained in:
Sangelo 2024-03-12 20:43:58 +01:00
parent 8e23062fa9
commit 0fe180b33f
5 changed files with 12 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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"

47
src/lib/index.ts
View file

@ -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

30
src/routes/+page.svelte
View file

@ -1,39 +1,9 @@
<script lang="ts">
import { onMount } from 'svelte';
import { smoothScrollTo } from '$lib/index';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin';
import Home from '$lib/components/Home.svelte';
import About from '$lib/components/About.svelte';
import Projects from '$lib/components/Projects.svelte';
import Socials from '$lib/components/Socials.svelte';
import { goto } from '$app/navigation';
onMount(() => {
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
// Assuming each section component has an id set to 'home', 'about', 'projects', 'socials'
const sectionIds = ['home', 'about', 'projects', 'socials'];
sectionIds.forEach((id, i) => {
ScrollTrigger.create({
trigger: `#${id}`,
onEnter: () => smoothScrollTo(id),
start: 'top bottom',
end: 'bottom top',
markers: true
});
ScrollTrigger.create({
trigger: `#${id}`,
start: 'bottom top',
onEnterBack: () => smoothScrollTo(id),
markers: true
});
});
});
</script>

4
src/styles/index.scss
View file

@ -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 {

5
yarn.lock
View file

@ -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"