Scroll animator

A collection of functions for animating browser scroll.

• Written in ES6.
• Implements UMD.
• IE 11 and modern browser support.
• MIT license.

Setup

Install scroll animator in your project as an NPM dependency:

npm install scroll-animator --save

Be sure to polyfill:

• document.scrollingElement
• window.requestAnimationFrame

For example:

npm install scrollingelement --save

import 'scrollingelement'

Import relevent functions:

import { scrollToElement } from 'scroll-animator'

API

scrollAnimator.getScrollMax(container) ⇒ Object

Gets an element's scroll max positions.

Kind: static method of scrollAnimator
Returns: Object - X and Y scroll max positions in pixels.

Param	Type	Description
container	HTMLElement	Container element with scrolling overflow.

scrollAnimator.getTargetScrollPos(container, target) ⇒ Object

Gets the scroll offset of an element within a container.

Kind: static method of scrollAnimator
Returns: Object - The x and y offset in pixels.

Param	Type	Description
container	HTMLElement	Container element.
target	HTMLElement	Target element.

scrollAnimator.easeInOutCubic(t) ⇒ number

An easeInOutCubic easing function.

Kind: static method of scrollAnimator
Returns: number - Easing multiplier.
See: http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation

Param	Type	Description
t	number	Decimal representing elapsed time out of the complete animation duration.

scrollAnimator.animateScroll(options)

Smoothly scrolls an element. Scroll interference caused by the user or another script cancels the animation.

Kind: static method of scrollAnimator

Param	Type	Default	Description
options	Object		Options.
[options.container]	HTMLElement	document.scrollingElement	Container element to scroll.
[options.targetX]	number		Target X position within the container, defaulting to the current position.
[options.targetY]	number		Target Y position within the container, defaulting to the current position.
[options.offsetX]	number	0	Target X position offset.
[options.offsetY]	number	0	Target Y position offset.
[options.duration]	number	500	Total scroll animation duration in milliseconds.
[options.onArrive]	function		Callback to run after scrolling to the target.
[options.onInterrupt]	function		Callback to run if scrolling is interrupted

scrollAnimator.scrollToElement(options)

Scrolls a container to a target element.

Kind: static method of scrollAnimator

Param	Type	Default	Description
options	Object		Options.
[options.container]	HTMLElement	document.scrollingElement	Container element to scroll.
options.target	HTMLElement		Target element to scroll to.
[options.offsetX]	number	0	Target X position offset.
[options.offsetY]	number	0	Target Y position offset.
[options.duration]	number	500	Total scroll animation duration in milliseconds.
[options.onArrive]	function		Callback to run after scrolling to the target.
[options.onInterrupt]	function		Callback to run if scrolling is interrupted

scrollAnimator~position(start, end, elapsed, duration) ⇒ number

Calculates the scroll position at a given scroll animation moment.

Kind: inner method of scrollAnimator
Returns: number - A scroll position.

Param	Type	Description
start	number	Start scroll position.
end	number	End scroll position.
elapsed	number	Time since beginning the scroll animation in milliseconds.
duration	number	Total scroll animation duration in milliseconds.