From ed5bb6cc3fc15ee60fdedd1e1c95f634eea3189b Mon Sep 17 00:00:00 2001 From: matt Date: Fri, 19 Sep 2025 12:31:56 +0200 Subject: [PATCH] fix: improve smooth scroll with ease-out deceleration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Changed from linear to ease-out cubic easing function - Scroll now starts immediately at full speed (no initial delay) - Gradually decelerates as it approaches the target anchor - Provides more natural and responsive scrolling experience 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- apps/website/composables/useSmoothScroll.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/website/composables/useSmoothScroll.ts b/apps/website/composables/useSmoothScroll.ts index f7ebb86..3dd5e39 100644 --- a/apps/website/composables/useSmoothScroll.ts +++ b/apps/website/composables/useSmoothScroll.ts @@ -13,9 +13,9 @@ export const useSmoothScroll = () => { window.removeEventListener('keydown', cancelScroll) } - // Linear easing for constant-speed scrolling - const easeLinear = (t: number): number => { - return t + // Ease-out cubic: starts fast, slows down as it approaches target + const easeOutCubic = (t: number): number => { + return 1 - Math.pow(1 - t, 3) } const smoothScrollTo = (target: number | Element, duration: number = 800) => { @@ -43,7 +43,7 @@ export const useSmoothScroll = () => { if (startTime === null) startTime = currentTime const timeElapsed = currentTime - startTime const progress = Math.min(timeElapsed / duration, 1) - const easedProgress = easeLinear(progress) + const easedProgress = easeOutCubic(progress) window.scrollTo(0, startPosition + distance * easedProgress)