scrollto-with-animation


### Live demo

  

- 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

``bash
npm install scrollto-with-animation --save
`

Usage

$3

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

$3

`html

`

$3

`javascript
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