JSPM

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

Animated scroll with requestAnimationFrame. For smooth animate scrollTo defining the easing, running at 60FPS and cross-browser

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

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