https://github.com/faustienf/easing-scroll
♿️ Smooth scrolling
https://github.com/faustienf/easing-scroll
animation-scroll easing-scroll scroll smooth-scroll smooth-scrolling
Last synced: 10 months ago
JSON representation
♿️ Smooth scrolling
- Host: GitHub
- URL: https://github.com/faustienf/easing-scroll
- Owner: faustienf
- License: mit
- Created: 2022-12-30T13:21:54.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-29T08:55:57.000Z (about 3 years ago)
- Last Synced: 2024-08-08T15:46:58.285Z (almost 2 years ago)
- Topics: animation-scroll, easing-scroll, scroll, smooth-scroll, smooth-scrolling
- Language: TypeScript
- Homepage: https://easing-scroll.vercel.app
- Size: 45.9 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# easing-scroll
[](https://npmjs.org/package/easing-scroll)
♿️ Smooth scrolling. [Demo](https://easing-scroll.vercel.app).
## Install
```sh
npm install easing-scroll
```
## Features
- 📦 Zero dependencies
- 📈 Customize [easing function](https://easings.net)
- 🚫 Abort scrolling ([AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal))
- 🔄 Waiting for animation to end
- ☸️ Supports vertical and horizontal scroll
## Usage
```ts
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](https://easings.net), if you want to change easing function.
`duration` is animation duration in milliseconds.
```ts
easingScroll(target, {
duration: 400, // ms
// 👀 https://easings.net/#easeOutCubic
easing: (x) => 1 - Math.pow(1 - x, 3),
});
```
### Abort scrolling
Pass `signal` ([AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)),
if you want to abort scrolling.
```ts
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%_.
```ts
const progress = await easingScroll(target, {
...,
});
if (progress !== 1) {
console.log('Scrolling has been aborted.');
} else {
console.log('Completed.');
}
```