JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5583
  • Score
    100M100P100Q127151F
  • License MIT

Animated scrolling without any dependency on libraries

Package Exports

  • scrollto-with-animation

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (scrollto-with-animation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

scrollto-with-animation

This is a simple function for animating scroll that can define a easing equation function.

  • No dependency on extra libraries.
  • Available adding script or browserify
  • Cross-browser.
  • 60 FPS Animation.
  • If user scrolls while animation is running, scroll animation would be immediately canceled.

Install

npm install scrollto-with-animation --save

Usage

Available with browserify

var scrollToWithAnimation = require('scrollto-with-animation')

or available as a script

<script src="scrollto-with-animation.js"></script>

Example

scrollToWithAnimation(
    document.body, // element to scroll
    0, // target scrollY (0 means top of the page)
    10000, // duration in ms
    'easeInOutCirc', /*
        Can be a name of the list of 'Posible easing equations' or a callback
        that defines the ease. # http://gizma.com/easing/
    */
    function() { // callback function that runs after the animation (optional)
      console.log('done!')
    }
);

This will scroll to top of the page and the animation will run for 10 seconds (10000ms).

Options

Posible easings equations

  • linearTween
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc

License

MIT

Thanks

Thanks to madebysource/animated-scrollto, for the base of the animated, I just added the possibility of define the equation or chose a existing one.