Use Lenis to use smooth scroll to anchors
This commit is contained in:
@@ -155,53 +155,6 @@ export const scrollToTop = (delay?: number) => {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Smooth Scroll to an element
|
||||
* @description Promised based
|
||||
* @url Based on: https://www.youtube.com/watch?v=oUSvlrDTLi4
|
||||
*/
|
||||
const smoothScrollPromise = (target: HTMLElement, duration: number = 1600): Promise<void> => {
|
||||
const position = target.getBoundingClientRect().top + 1
|
||||
const startPosition = window.scrollY
|
||||
const distance = position - startPosition
|
||||
let startTime: number = null
|
||||
|
||||
// Return Promise
|
||||
return new Promise((resolve) => {
|
||||
if (!(target instanceof Element)) throw new TypeError('Argument 1 must be an Element')
|
||||
if (typeof window === 'undefined') return
|
||||
|
||||
// Scroll to animation
|
||||
const animation = (currentTime: number) => {
|
||||
if (startTime === null) startTime = currentTime
|
||||
const timeElapsed = currentTime - startTime
|
||||
// Create easing value
|
||||
const easedYPosition = quartInOutFunc(timeElapsed, startPosition, distance, duration)
|
||||
// Scroll to Y position
|
||||
window.scrollTo(0, easedYPosition)
|
||||
// Loop or end animation
|
||||
if (timeElapsed < duration) {
|
||||
requestAnimationFrame(animation)
|
||||
} else {
|
||||
return resolve()
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(animation)
|
||||
})
|
||||
}
|
||||
export const smoothScroll = async ({ hash, callback, changeHash = true, event }: smoothScrollOptions) => {
|
||||
if (event) event.preventDefault()
|
||||
|
||||
const target = document.getElementById(hash)
|
||||
|
||||
smoothScrollPromise(target).then(() => {
|
||||
if (changeHash) location.hash = hash
|
||||
callback && callback()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Copy mailto links to clipboard and show message
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user