smooth-scroll-operator
A dead simple and lightweight library to animate the scroll of the window or any HTMLElement.
No need to ask, he's a smooth operator...
- Really small filesize, only 1 dependency (~3KB uncompressed, including dependencies).
- Supports Beizer Curves and custom easing functions, with predefined values.
- Custom timing function (uses RAF by default if available)
- Pause/resume/stop/restart
- Animations respect the actual clock, so no matter the frame rate, the animation will still properly last the appropriate amount of time.
Installation
NPM:
npm i smooth-scroll-operator
browser:
You can use either smooth-scroll-operator.umd.js
or smooth-scroll-operator.min.umd.js
from the latest release in a script
tag.
This includes all dependencies.
Example Usage
; let el = document; //scroll el to 500sso; // Scroll to y = 500, with a duration of 200ms, and a custom cubic-bezier easing function:sso; // Scroll to y = 500, with a duration of 200ms, and a pre-defined easing function.sso; //scroll windowsso; //Scroll and then pause animation 300ms later.let animation = sso; ; //resume 400ms later.; //Scroll and then immediately stop animationlet animation = sso; animation;
API
scrollY({HTMLElement|window} el, {number} targetY, {object=} options)
Animates the scrolling of a given element (scrolls to target position). Returns an instance of DOMAnimate.
You can stop, pause, or resume the animation by calling .stop()
, .pause()
, or .resume()
, respectively, on the returned instance.
{HTMLElement} el
The element to scroll. Can be window
.
{number} targetY
The y position to animate/scroll to in pixels.
{object=} options
An optional map of parameters:
{integer} duration
Animation duration in milliseconds. (Default: 400
)
{array} easing
An array to pass to the cubic-bezier easing function. (Default: SmoothScrollOperator.EASE_IN_OUT
)
{function} onComplete
A callback function that is called when the animation is finished.
Constants
EASING
smooth-scroll-operator
ships with a small Bezier Curve library:
EASING.EASE
EASING.EASE_IN
EASING.EASE_OUT
EASING.EASE_IN_OUT
EASING.LINEAR
License
MIT. Free to use in all your things!
Contribution
DO IT! PR's welcome. Need to add testing, linting, and support for scrollX
, or both x/y at the same time.