Skip to content

jackyon/scrollto-with-animation

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

js-standard-style npm

  • 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

About

Animated Scroll with requestAnimationFrame

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%