refactor: use one onMount on SmoothScroll

This commit is contained in:
2023-10-31 12:26:12 +01:00
parent e64a3af6bb
commit 031da50f61

View File

@@ -1,30 +1,19 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment'
import { onMount } from 'svelte' import { onMount } from 'svelte'
import Lenis from '@studio-freight/lenis' import Lenis from '@studio-freight/lenis'
import { smoothScroll } from '$utils/stores' import { smoothScroll } from '$utils/stores'
let smoothScrollRAF = 0 let smoothScrollRAF = 0
onMount(() => {
// Setup smooth scroll // Setup smooth scroll
if (browser) {
$smoothScroll = new Lenis({ $smoothScroll = new Lenis({
duration: 1.2, duration: 1.2,
easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://easings.net/ easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // https://easings.net/
smoothWheel: true, smoothWheel: true,
orientation: 'vertical', orientation: 'vertical',
}) })
}
// Lenis RAF
const update = (time: number) => {
$smoothScroll.raf(time)
smoothScrollRAF = requestAnimationFrame(update)
}
onMount(() => {
// Enable smooth scroll // Enable smooth scroll
requestAnimationFrame(update) requestAnimationFrame(update)
@@ -34,4 +23,10 @@
$smoothScroll.destroy() $smoothScroll.destroy()
} }
}) })
// Lenis RAF
const update = (time: number) => {
$smoothScroll.raf(time)
smoothScrollRAF = requestAnimationFrame(update)
}
</script> </script>