animate-top-offset

GitHub release GitHub issues GitHub last commit Build Status npm npm Analytics

Animate Top Offset

Scroll a container to a specific Y offset

Install

npm i @three11/animate-top-offset

or

yarn add @three11/animate-top-offset

Usage

First, import the module:

import animateTopOffset from '@three11/animate-top-offset';

Then use the module:

With one element

const button = document.getElementById('button');

button.addEventListener('click', event => {
	event.preventDefault();

	const href = event.target.getAttribute('href');
	const offset = doc.querySelector(href).offsetTop;

	animateTopOffset(offset);
});

With many elements

const buttons = document.querySelectorAll('.js-scroll-to');

// Instead of Array.from you can spread the buttons: [...buttons]
Array.from(buttons).forEach(button => {
	button.addEventListener('click', event => {
		event.preventDefault();

		const href = event.target.getAttribute('href');
		const offset = doc.querySelector(href).offsetTop;

		animateTopOffset({ offset });
	});
});

The examples above assume that you have a modern ES6 setup installed and configured (Webpack, Babel, etc). If not you can always fallback to ES5:

const buttons = document.querySelectorAll('.js-scroll-to');

[].forEach.call(buttons, function (button) {
	button.addEventListener('click', function (event) {
		event.preventDefault();

		var href = event.target.getAttribute('href');
		var offset = doc.querySelector(href).offsetTop;

		animateTopOffset(offset);
	});
});

Arguments

The function accepts the following options:

Name Type Required Description Default value
offset number false Offset to scroll to 0
container HTMLElement | Window false The element to scroll window
speed number false Speed of the scroll animation 200
easing 'easeOutSine' | 'easeInOutSine' | 'easeInOutQuint' false Easing of the scroll animation 'easeOutSine'
easings Record<string, (pos: number) => number> false List of easing equations See below
animateTopOffset({ offset: 0, container: window, speed: 2000, easing: 'easeOutSine', easings: easingEquations });

Calling the function with the default values (animateTopOffset()) will scroll the window back to top.

Easings

animateTopOffset provides the ability to specify a custom list of easing functions. The default one contains three easings: 'easeOutSine', 'easeInOutSine' and 'easeInOutQuint'.

The shape of the list is the following:

const easingEquations: Record<string, (pos: number) => number> = {
	easeOutSine: (pos: number) => Math.sin(pos * (Math.PI / 2)),
	easeInOutSine: (pos: number) => -0.5 * (Math.cos(Math.PI * pos) - 1),
	easeInOutQuint: (pos: number) => {
		if ((pos /= 0.5) < 1) {
			return 0.5 * Math.pow(pos, 5);
		}

		return 0.5 * (Math.pow(pos - 2, 5) + 2);
	}
};

The easing argument should match one of the keys of the easings argument.`

Demo

A minimal demo is available here Clicking on the links in the menu scrolls the page to the particular section.

License

GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007


Go back

Send me your message