jackyon / scrollto-with-animation

Animated Scroll with requestAnimationFrame

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

#### Live demo

Install

npm install scrollto-with-animation --save

Usage

Available with browserify

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

or available 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