easing-scroll

♿️ Smooth scrolling. Demo.

Install

npm install easing-scroll

Features

📦 Zero dependencies
📈 Customize easing function
🚫 Abort scrolling (AbortSignal)
🔄 Waiting for animation to end
☸️ Supports vertical and horizontal scroll

Usage

import { easingScroll } from "easing-scroll";

const controller = new AbortController();
// Abort scrolling
// controller.abort(); ❌

const target = document.querySelector(".container");

const progress = await easingScroll(target, {
  left: 0, // px
  top: 300, // px
  duration: 400, // ms
  signal: controller.signal,
  // 👀 https://easings.net/#easeOutCubic
  easing: (x) => 1 - Math.pow(1 - x, 3),
});

if (progress === 1) {
  console.log("Completed");
} else {
  console.log("Aborted");
}

Animation

Linear function (t) => t is used by default. Pass easing, if you want to change easing function. duration is animation duration in milliseconds.

easingScroll(target, {
  duration: 400, // ms
  // 👀 https://easings.net/#easeOutCubic
  easing: (x) => 1 - Math.pow(1 - x, 3),
});

Abort scrolling

Pass signal (AbortSignal), if you want to abort scrolling.

const controller = new AbortController();
setTimeout(() => {
  controller.abort();
}, 100);

const progress = await easingScroll(target, {
  ...,
  signal: controller.signal,
});

if (progress !== 1) {
  console.log('Scrolling has been aborted.');
}

progress is a number from 0 to 1.

1 - Scrolling is completed 100%.

<1 - Scrolling has been aborted and completed x%.