Add smooth scroll globally
This commit is contained in:
36
src/components/SmoothScroll.svelte
Normal file
36
src/components/SmoothScroll.svelte
Normal file
@@ -0,0 +1,36 @@
|
||||
<script lang="ts">
|
||||
import { browser } from '$app/env'
|
||||
import { onMount } from 'svelte'
|
||||
import Lenis from '@studio-freight/lenis'
|
||||
import { smoothScroll } from '$utils/stores'
|
||||
|
||||
let smoothScrollRAF = 0
|
||||
|
||||
|
||||
// Setup smooth scroll
|
||||
if (browser) {
|
||||
$smoothScroll = new Lenis({
|
||||
lerp: 0.1,
|
||||
smooth: true,
|
||||
direction: 'vertical',
|
||||
})
|
||||
}
|
||||
|
||||
// Lenis RAF
|
||||
const update = () => {
|
||||
$smoothScroll.raf()
|
||||
smoothScrollRAF = requestAnimationFrame(update)
|
||||
}
|
||||
|
||||
|
||||
onMount(() => {
|
||||
// Enable smooth scroll
|
||||
requestAnimationFrame(update)
|
||||
|
||||
// Destroy
|
||||
return () => {
|
||||
cancelAnimationFrame(smoothScrollRAF)
|
||||
$smoothScroll.destroy()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user