feat: add easing option

README.md

@@ -47,6 +47,7 @@ Accepts a string with the name to reference the element
 | `ref` | `""` | Element reference. |
 | `offset` | `0` | Offset that should be applied when scrolling. |
 | `duration` | `500` | Duration (in milliseconds) of the animation. |
+| `easing` | `cubicInOut` | Easing function to be used when animating. Use any easing from [`svelte/easing`][svelte-easing] or a custom easing function. |
 
 ### Override global options
 
@@ -69,3 +70,4 @@ Copyright (c) 2021 Valmisson Grizorte
 
 [npm-shields]: https://img.shields.io/npm/v/svelte-smartscroll.svg
 [license-shields]: https://img.shields.io/github/license/valmisson/svelte-smartscroll.svg
+[svelte-easing]: https://svelte.dev/docs#svelte_easing

globals.d.ts

@@ -1,6 +1,7 @@
 interface GlobalOptions {
   offset: number
   duration: number
+  easing: (t: number) => number
 }
 
 interface ScrollToOpts extends GlobalOptions {
@@ -11,6 +12,7 @@ interface SmoothOptions {
   start: number
   end: number
   duration: number
+  easing: (t: number) => number
 }
 
 interface ElementRef {

src/actions/ScrollTo.ts

@@ -15,7 +15,7 @@ const globalOpts = getGlobalOptions()
 const handle = (event: Event, options: ScrollToOpts): void => {
   event.preventDefault()
 
-  const { ref, offset, duration } = options
+  const { ref, offset, duration, easing } = options
   const element = getElement(elementsList, ref)
 
   if (!element) {
@@ -25,7 +25,7 @@ const handle = (event: Event, options: ScrollToOpts): void => {
   const start = window.pageYOffset
   const end = getPosition(element) + offset
 
-  smoothScroll({ start, end, duration }, (position: number) => {
+  smoothScroll({ start, end, duration, easing }, (position: number) => {
     window.scroll(0, position)
   })
 }

src/helpers/smoothScroll.ts

@@ -1,27 +1,29 @@
 import { now } from 'svelte/internal'
-import { cubicInOut } from 'svelte/easing'
 
 const currentPosition = (
   start: number,
   end: number,
   elapsed: number,
-  duration: number
+  duration: number,
+  easing: (t: number) => number
 ): number => {
   if (elapsed > duration) return end
 
-  return start + (end - start) * cubicInOut(elapsed / duration)
+  return start + (end - start) * easing(elapsed / duration)
 }
 
 const smoothScroll = (
   options: SmoothOptions,
   callback: (positon: number) => void
 ): void => {
-  const { start, end, duration } = options
+  const { start, end, duration, easing } = options
   const clock = now()
 
   const step = () => {
     const elapsed = now() - clock
-    const position = currentPosition(start, end, elapsed, duration)
+    const position = currentPosition(
+      start, end, elapsed, duration, easing
+    )
 
     callback(position)
 

src/stores.ts

@@ -1,7 +1,9 @@
 import { writable } from 'svelte/store'
+import { cubicInOut } from 'svelte/easing'
 
 export const elements = writable<Array<ElementRef>>([])
 export const globalOptions = writable<GlobalOptions>({
   offset: 0,
-  duration: 500
+  duration: 500,
+  easing: cubicInOut
 })