Project Refactoring and some Cleanup #1
5 changed files with 79 additions and 12 deletions
|
@ -31,6 +31,7 @@
|
||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"gsap": "^3.12.5",
|
||||||
"md-block": "^0.0.1",
|
"md-block": "^0.0.1",
|
||||||
"svelte-material-icons": "^3.0.5",
|
"svelte-material-icons": "^3.0.5",
|
||||||
"svelte-transition": "^0.0.10"
|
"svelte-transition": "^0.0.10"
|
||||||
|
|
|
@ -2,19 +2,50 @@
|
||||||
|
|
||||||
import { goto } from '$app/navigation';
|
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) {
|
export function smoothScrollTo(elementId: string) {
|
||||||
|
gsap.registerPlugin(ScrollToPlugin);
|
||||||
const element = document.getElementById(elementId);
|
const element = document.getElementById(elementId);
|
||||||
if (element) {
|
if (!element) return;
|
||||||
element.scrollIntoView({
|
|
||||||
behavior: 'smooth'
|
// 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);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// export function redirectToHome() {
|
|
||||||
// // goto('/');
|
|
||||||
// smoothScrollTo('home');
|
|
||||||
// }
|
|
||||||
|
|
||||||
export function handleKeydown(event: KeyboardEvent) {
|
export function handleKeydown(event: KeyboardEvent) {
|
||||||
// Trigger redirection on Enter key or Space bar
|
// Trigger redirection on Enter key or Space bar
|
||||||
|
|
|
@ -1,9 +1,39 @@
|
||||||
<script lang="ts">
|
<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 Home from '$lib/components/Home.svelte';
|
||||||
import About from '$lib/components/About.svelte';
|
import About from '$lib/components/About.svelte';
|
||||||
import Projects from '$lib/components/Projects.svelte';
|
import Projects from '$lib/components/Projects.svelte';
|
||||||
import Socials from '$lib/components/Socials.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>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
.container {
|
.container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
scroll-snap-type: y mandatory;
|
// scroll-snap-type: y mandatory;
|
||||||
overflow-y: scroll;
|
// overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section {
|
.section {
|
||||||
|
|
|
@ -934,6 +934,11 @@ graphemer@^1.4.0:
|
||||||
resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
|
resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
|
||||||
integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
|
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:
|
has-flag@^4.0.0:
|
||||||
version "4.0.0"
|
version "4.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
|
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
|
||||||
|
|
Loading…
Reference in a new issue