diff --git a/apps/website/components/AppNavbar.vue b/apps/website/components/AppNavbar.vue index 8d41e53..3b2646a 100644 --- a/apps/website/components/AppNavbar.vue +++ b/apps/website/components/AppNavbar.vue @@ -65,11 +65,11 @@ const handleSmoothScroll = (event: Event, href: string) => { } event.preventDefault() - scrollToElement(href, 1500) // 1.5 seconds for slower scrolling + scrollToElement(href, 1800) // 1.8 seconds for smoother scrolling } const scrollToTop = () => { - smoothScrollToTop(1500) // 1.5 seconds for slower scrolling + smoothScrollToTop(1800) // 1.8 seconds for smoother scrolling } onMounted(() => { diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue index ed24ab4..d50a6c7 100644 --- a/apps/website/components/HeroSection.vue +++ b/apps/website/components/HeroSection.vue @@ -101,11 +101,11 @@ const handlePhoneClick = () => { } const handleServicesClick = () => { - scrollToElement('#services', 1500) // 1.5 seconds for slower scrolling + scrollToElement('#services', 1800) // 1.8 seconds for smoother scrolling } const handleScrollToExplore = () => { - scrollToElement('#services', 1500) // Scroll to services section + scrollToElement('#services', 1800) // Scroll to services section } const handleVideoVisibility = () => { @@ -136,7 +136,7 @@ const initSmoothScroll = () => { if (!href) { return } - scrollToElement(href, 1500) // 1.5 seconds for slower scrolling + scrollToElement(href, 1800) // 1.8 seconds for smoother scrolling }) }) } diff --git a/apps/website/composables/useSmoothScroll.ts b/apps/website/composables/useSmoothScroll.ts index 2e45d7a..6e1a6fd 100644 --- a/apps/website/composables/useSmoothScroll.ts +++ b/apps/website/composables/useSmoothScroll.ts @@ -1,5 +1,5 @@ export const useSmoothScroll = () => { - const smoothScrollTo = (target: number | Element, duration: number = 1200) => { + const smoothScrollTo = (target: number | Element, duration: number = 1800) => { const targetPosition = typeof target === 'number' ? target : target.getBoundingClientRect().top + window.pageYOffset @@ -12,14 +12,14 @@ export const useSmoothScroll = () => { const timeElapsed = currentTime - startTime const progress = Math.min(timeElapsed / duration, 1) - // Easing function for smooth deceleration - const easeInOutCubic = (t: number) => { + // Easing function for smoother, more consistent motion + const easeInOutQuad = (t: number) => { return t < 0.5 - ? 4 * t * t * t - : 1 - Math.pow(-2 * t + 2, 3) / 2 + ? 2 * t * t + : 1 - Math.pow(-2 * t + 2, 2) / 2 } - window.scrollTo(0, startPosition + distance * easeInOutCubic(progress)) + window.scrollTo(0, startPosition + distance * easeInOutQuad(progress)) if (progress < 1) { requestAnimationFrame(animation) @@ -29,14 +29,14 @@ export const useSmoothScroll = () => { requestAnimationFrame(animation) } - const scrollToElement = (selector: string, duration: number = 1200) => { + const scrollToElement = (selector: string, duration: number = 1800) => { const element = document.querySelector(selector) if (element) { smoothScrollTo(element, duration) } } - const scrollToTop = (duration: number = 1200) => { + const scrollToTop = (duration: number = 1800) => { smoothScrollTo(0, duration) }