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
- 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 --saveUsage
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
linearTweeneaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseInSineeaseOutSineeaseInOutSineeaseInExpoeaseOutExpoeaseInOutExpoeaseInCirceaseOutCirceaseInOutCirc
Feel free to add more ease functions to easings.js open a Pull request!
License
MIT