scroll-into-area

♿️ Smooth scrolling an element into view. Demo.

Install

npm install scroll-into-area

Features

• 📈 Customize easing function
• 🚫 Abort scrolling (AbortSignal)
• 🔄 Waiting for animation to end

Usage

import { scrollIntoArea } from "scroll-into-area";

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

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

const progress = await scrollIntoArea(target, {
  container,
  x: "end", // start, center, end
  y: "start", // start, center, end
  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.

scrollIntoArea(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 scrollIntoArea(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%.

const progress = await scrollIntoArea(target, {
  ...,
});

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