Project Refactoring and some Cleanup #1
5 changed files with 12 additions and 79 deletions
|
@ -31,7 +31,6 @@
|
||||||
},
|
},
|
||||||
"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,50 +2,19 @@
|
||||||
|
|
||||||
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) return;
|
if (element) {
|
||||||
|
element.scrollIntoView({
|
||||||
// Function to disable scrolling
|
behavior: 'smooth'
|
||||||
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,39 +1,9 @@
|
||||||
<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>
|
||||||
|
|
||||||
|
@ -46,4 +16,4 @@
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@import '$styles/index.scss';
|
@import '$styles/index.scss';
|
||||||
</style>
|
</style>
|
|
@ -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,11 +934,6 @@ 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