MoveTo
A lightweight (only 1kb gzipped) scroll animation javascript library without any dependency.
Demo
Installation
Using npm
$ npm install moveto --save
Using Yarn
$ yarn add moveto
Using Bower
$ bower install moveTo --save
Usage
const moveTo = new MoveTo();
const target = document.getElementById('target');
moveTo.move(target);
const trigger = document.getElementsByClassName('js-trigger')[0];
moveTo.registerTrigger(trigger);
Trigger HTML markup
You can pass all options as data attributes with mt
prefix. Option name should be written in kebab case format, for example:
<a href="#target" class="js-trigger" data-mt-duration="300">Trigger</a>
<button type="button" class="js-trigger" data-target="#target" data-mt-duration="300">Trigger</button>
Options
The default options are as follows:
new MoveTo({
tolerance: 0,
duration: 800,
easing: 'easeOutQuart',
container: window
})
Option | Default | Desctiption |
---|
tolerance | 0 | The tolerance of the target to be scrolled, can be negative or positive |
duration | 800 | Duration of scrolling, in milliseconds |
easing | easeOutQuart | Ease function name |
container | window | The container been computed and scrolled |
callback | noop | The function to be run after scrolling complete. Target passes as the first argument |
API
move(target, options)
Start scroll animation from current position to the anchor point
target
Type: HTMLElement|Number
Target element/position to be scrolled. Target position is the scrolling distance. It must be negative if the upward movement is desired.
options
Type: Object
Pass custom options.
registerTrigger(trigger, callback)
trigger
Type: HTMLElement
This is the trigger element for starting to scroll when on click.
callback
This is the callback function to be run after the scroll complete. This will overwrite the callback option.
addEaseFunction(name, fn)
Adds custom ease function.
name
Type: String
Ease function name.
fn
Type: Function
Ease function. See Easing Equations for more ease function.
Examples
Pass ease function(s) when creating instance
document.addEventListener('DOMContentLoaded', function () {
const easeFunctions = {
easeInQuad: function (t, b, c, d) {
t /= d;
return c * t * t + b;
},
easeOutQuad: function (t, b, c, d) {
t /= d;
return -c * t* (t - 2) + b;
}
}
const moveTo = new MoveTo({
duration: 1000,
easing: 'easeInQuad'
}, easeFunctions);
const trigger = document.getElementsByClassName('js-trigger')[0];
moveTo.registerTrigger(trigger);
});
Working with callback function
document.addEventListener('DOMContentLoaded', function () {
const moveTo = new MoveTo({
duration: 1000,
callback: function (target) {
}
});
const trigger = document.getElementsByClassName('js-trigger')[0];
moveTo.registerTrigger(trigger, function (target) {
});
moveTo.move(1200, {
duration: 500,
callback: function () {
}
});
});
Unregister a trigger
document.addEventListener('DOMContentLoaded', function () {
const moveTo = new MoveTo();
const trigger = document.getElementsByClassName('js-trigger')[0];
const unregister = moveTo.registerTrigger(trigger, { duration: 500 });
unregister();
});
Back to top
document.addEventListener('DOMContentLoaded', function () {
const moveTo = new MoveTo();
const triggers = document.getElementsByClassName('js-back-to-top');
for (var i = 0; triggers.length < i; i++) {
moveTo.registerTrigger(triggers[i]);
}
});
<a href="#" class="js-back-to-top" data-mt-duration="300">Back to top!</a>
Development setup
$ yarn
$ npm install
$ yarn start
$ npm run start
$ yarn lint
$ npm run lint
$ yarn build
$ npm run build
$ yarn test
$ npm test
Browser support
It should work in the current stable releases of Chrome, Firefox, Safari as well as IE10 and up. To add support for older browsers, consider including polyfills/shims for the requestAnimationFrame.
License
Copyright (c) 2017 Hasan Aydoğdu. See the LICENSE file for license rights and limitations (MIT).