Wondering what’s next for npm?Check out our public roadmap! »

js-animate-scroll

1.0.8 • Public • Published

js-animate-scroll

Build Status Coverage Status

This is fork of animate-scroll-js.

Lightweight javascript library to animate vertical scrolling to a specified element without jQuery.

Click HERE for the DEMO.

Install

Via NPM:

$ npm install js-animate-scroll

Usage

import AnimateScroll from 'js-animate-scroll';

or

<script type="text/javascript" src="/js-animate-scroll/dist/animate-scroll.min.js"></script>

Run:

var options = {
    duration: 200,
    easing: 'linear',
    padding: 0,
    align: 'top',
    onFinish: function () {}
};
new AnimateScroll('#some-select-element', options);
  • target - Specifies the DOM element, or an element selector, or a page offset value (px) to scroll to.
  • options - Additional configuration for scrolling:
    • duration - How long the scroll animation lasts in milliseconds. Default: 200;
    • easing - Easing type for scroll animation. See below for options Default: linear. (string);
    • padding - How much space in pixels from the top of the specified element to scroll to. Default: 0;
    • align - Can be set to top, center, bottom and scroll will animate to the target aligned as specified within the window. Default top (string);
    • onFinish - Callback function to run when the animation is finished or cancelled.

Easing

There are available easing functions:

  • linear
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint

Notes

If the user manually scrolls during the scroll animation, the animation will cancel and the onFinish function will run

Build

Run dev environment (if you want to use Docker, if not - step to next):

$ docker-compose up
$ docker-compose run ext sh

Run build:

$ npm install
$ npm run build

Run tests

Using Docker

$ docker-compose run --rm ext npm run test:run-without-coverage

Using locale dev environment

$ npm run test

License

js-animate-scroll is released under the MIT License.

Install

npm i js-animate-scroll

DownloadsWeekly Downloads

58

Version

1.0.8

License

MIT

Unpacked Size

40.2 kB

Total Files

10

Last publish

Collaborators

  • avatar