Project Refactoring and some Cleanup #1
5 changed files with 79 additions and 12 deletions
|
@ -31,6 +31,7 @@
|
|||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"gsap": "^3.12.5",
|
||||
"md-block": "^0.0.1",
|
||||
"svelte-material-icons": "^3.0.5",
|
||||
"svelte-transition": "^0.0.10"
|
||||
|
|
|
@ -2,19 +2,50 @@
|
|||
|
||||
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) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// export function redirectToHome() {
|
||||
// // goto('/');
|
||||
// smoothScrollTo('home');
|
||||
// }
|
||||
|
||||
|
||||
export function handleKeydown(event: KeyboardEvent) {
|
||||
// Trigger redirection on Enter key or Space bar
|
||||
|
|
|
@ -1,9 +1,39 @@
|
|||
<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>
|
||||
|
||||
|
@ -16,4 +46,4 @@
|
|||
|
||||
<style lang="scss">
|
||||
@import '$styles/index.scss';
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -934,6 +934,11 @@ 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"
|
||||
|
|
Loading…
Reference in a new issue