3.0.4 • Published 4 years ago

scrollto-with-animation v3.0.4

Weekly downloads
3,664
License
MIT
Repository
github
Last release
4 years ago

npm.io

### 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

3.0.4

4 years ago

3.0.3

4 years ago

4.5.4

4 years ago

3.0.2

4 years ago

4.5.3

4 years ago

4.5.2

7 years ago

4.4.4

7 years ago

4.3.3

8 years ago

4.3.2

8 years ago

4.3.1

8 years ago

4.3.0

8 years ago

4.2.0

8 years ago

4.1.0

8 years ago

4.0.0

8 years ago

3.0.0

8 years ago

2.3.0

8 years ago

2.2.2

8 years ago

2.2.1

8 years ago

2.2.0

8 years ago

2.1.4

8 years ago

2.1.3

8 years ago

2.1.1

8 years ago

2.0.1

8 years ago

2.0.0

8 years ago

1.7.0

8 years ago

1.6.2

8 years ago

1.6.1

8 years ago

1.6.0

8 years ago

1.5.2

8 years ago

1.5.1

8 years ago

1.5.0

8 years ago

1.1.0

8 years ago

1.0.0

8 years ago