Use Lenis to use smooth scroll to anchors

This commit is contained in:
2022-09-19 20:09:28 +02:00
parent f37a84d4f3
commit 486213ac77
7 changed files with 80 additions and 129 deletions

View File

@@ -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
*/