From fc0ee4c33b4bf462835e1a811bda1ec7d8f809c6 Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Fri, 19 Sep 2025 11:22:46 +0200
Subject: [PATCH] Fix smooth scroll easing for more consistent motion

- Changed from easeInOutCubic to easeInOutQuad for smoother motion
- Increased duration from 1.5 to 1.8 seconds
- Fixed jerky acceleration/deceleration issue
- Now provides consistent, smooth scrolling throughout entire motion

The scrolling is now properly smooth without the sudden speed changes.
---
 apps/website/components/AppNavbar.vue       |  4 ++--
 apps/website/components/HeroSection.vue     |  6 +++---
 apps/website/composables/useSmoothScroll.ts | 16 ++++++++--------
 3 files changed, 13 insertions(+), 13 deletions(-)

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)
   }