JSPM – scrollto-with-animation@4.2.0

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

Only one dependency (for the polyfill) for rAF cross-browser
60 FPS Animation
If user scrolls while animation is running, scroll animation would be immediately canceled
Available adding script or module

Live demo

Install

npm install scrollto-with-animation --save

Usage

Available as a module

var scrollToWithAnimation = require('scrollto-with-animation')
// or ES2015
import scrollToWithAnimation from 'scrollto-with-animation'

or as a script

<script src="scrollToWithAnimation.min.js"></script>

Example

scrollToWithAnimation(
    document.body, // element to scroll
    'scrollTop' // direction to scroll
    0, // target scrollY (0 means top of the page)
    10000, // duration in ms
    'easeInOutCirc', /*
        Can be a name of the list of 'Possible 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

Feel free to add more ease functions to easings.js open a Pull request!

License

MIT