/scrollto-with-animation

Animated Scroll with requestAnimationFrame

Primary LanguageJavaScriptMIT LicenseMIT

### Live demo

Build Status js-standard-style npm

  • Using requestAnimationFrame
  • 3.2k minified and gzipped
  • Runs the animation at 60 FPS
  • Available as a script or UMD
  • Only one dependency to have requestAnimationFrame cross-browser
  • If user scrolls while animation is running, scroll animation would be immediately canceled

Install

npm install scrollto-with-animation --save

Usage

Available as a UMD

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

or as a script

<script src="https://unpkg.com/scrollto-with-animation/dist/scrollto-with-animation.min.js"></script>

Example

scrollToWithAnimation(
    document.documentElement, // 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