https://github.com/jaydenseric/scroll-animator

Smart, lightweight functions to animate browser scroll.
https://github.com/jaydenseric/scroll-animator

esm maintained mjs node npm

Last synced: 15 days ago
JSON representation

Smart, lightweight functions to animate browser scroll.

• Host: GitHub
• URL: https://github.com/jaydenseric/scroll-animator
• Owner: jaydenseric
• Created: 2016-07-12T02:56:35.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-09-13T05:12:01.000Z (about 2 years ago)
• Last Synced: 2024-10-04T15:42:19.165Z (about 1 month ago)
• Topics: esm, maintained, mjs, node, npm
• Language: JavaScript
• Homepage: https://npm.im/scroll-animator
• Size: 115 KB
• Stars: 12
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • Funding: .github/funding.yml

Awesome Lists containing this project

README

        
# scroll-animator

Smart, lightweight functions to animate browser scroll.

- Scroll the page or a specific element.

- Scroll vertically and horizontally.

- Scroll to a target element or an arbitrary position, with an optional offset.

- Scroll animations can be interrupted by the user or other scripts (no “fighting” animations).

- Scroll animations adapt to a moving target; handy when loading affects layout.

- Intuitive [`easeInOutCubic`](https://easings.net/#easeInOutCubic) animation timing; a soft acceleration and deceleration.

- < 1 kB bundle size, tested.

- SSR friendly.

## Installation

For [Node.js](https://nodejs.org), to install [`scroll-animator`](https://npm.im/scroll-animator) with [npm](https://npmjs.com/get-npm), run:

```sh

npm install scroll-animator

```

For [Deno](https://deno.land) and browsers, an example import map:

```json

{

  "imports": {

    "scroll-animator/": "https://unpkg.com/[email protected]/"

  }

}

```

## Requirements

Supported runtime environments:

- [Node.js](https://nodejs.org) versions `^14.17.0 || ^16.0.0 || >= 18.0.0`.

- [Deno](https://deno.land).

- Browsers matching the [Browserslist](https://browsersl.ist) query [`> 0.5%, not OperaMini all, not dead`](https://browsersl.ist/?q=%3E+0.5%25%2C+not+OperaMini+all%2C+not+dead).

Consider polyfilling:

- [`document.scrollingElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement)

- [`window.requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Non [Deno](https://deno.land) projects must configure [TypeScript](https://typescriptlang.org) to use types from the ECMAScript modules that have a `// @ts-check` comment:

- [`compilerOptions.allowJs`](https://typescriptlang.org/tsconfig#allowJs) should be `true`.

- [`compilerOptions.maxNodeModuleJsDepth`](https://typescriptlang.org/tsconfig#maxNodeModuleJsDepth) should be reasonably large, e.g. `10`.

- [`compilerOptions.module`](https://typescriptlang.org/tsconfig#module) should be `"node16"` or `"nodenext"`.

## Exports

The [npm](https://npmjs.com) package [`scroll-animator`](https://npm.im/scroll-animator) features [optimal JavaScript module design](https://jaydenseric.com/blog/optimal-javascript-module-design). It doesn’t have a main index module, so use deep imports from the ECMAScript modules that are exported via the [`package.json`](./package.json) field [`exports`](https://nodejs.org/api/packages.html#exports):

- [`animateScroll.mjs`](./animateScroll.mjs)

- [`scrollToElement.mjs`](./scrollToElement.mjs)