Revert "Scroll Behaviour Changes using GSAP"

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

View file

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

View file

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

View file

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

View file

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

View file

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