fix: improve smooth scroll with ease-out deceleration
All checks were successful
build-website / build (push) Successful in 1m34s
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:
@@ -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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user