fix: improve smooth scroll with ease-out deceleration
All checks were successful
build-website / build (push) Successful in 1m34s

- 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 <noreply@anthropic.com>
This commit is contained in:
2025-09-19 12:31:56 +02:00
parent 753876b071
commit ed5bb6cc3f

View File

@@ -13,9 +13,9 @@ export const useSmoothScroll = () => {
window.removeEventListener('keydown', cancelScroll) window.removeEventListener('keydown', cancelScroll)
} }
// Linear easing for constant-speed scrolling // Ease-out cubic: starts fast, slows down as it approaches target
const easeLinear = (t: number): number => { const easeOutCubic = (t: number): number => {
return t return 1 - Math.pow(1 - t, 3)
} }
const smoothScrollTo = (target: number | Element, duration: number = 800) => { const smoothScrollTo = (target: number | Element, duration: number = 800) => {
@@ -43,7 +43,7 @@ export const useSmoothScroll = () => {
if (startTime === null) startTime = currentTime if (startTime === null) startTime = currentTime
const timeElapsed = currentTime - startTime const timeElapsed = currentTime - startTime
const progress = Math.min(timeElapsed / duration, 1) const progress = Math.min(timeElapsed / duration, 1)
const easedProgress = easeLinear(progress) const easedProgress = easeOutCubic(progress)
window.scrollTo(0, startPosition + distance * easedProgress) window.scrollTo(0, startPosition + distance * easedProgress)