A lightweight scroll animation javascript library without any dependency.
npm install node-movetoA lightweight (only 1kb gzipped) scroll animation javascript library without any dependency.
``sh`
$ npm install moveto --save
`sh`
$ yarn add moveto
`sh`
$ bower install moveTo --save
`js
const moveTo = new MoveTo();
const target = document.getElementById('target');
moveTo.move(target);
// Or register a trigger
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:
`html
Trigger
`
The default options are as follows:
`js`
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 |
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.
#### 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.
Adds custom ease function.
#### name
Type: String
Ease function name.
#### fn
Type: Function
Ease function. See Easing Equations for more ease function.
Pass ease function(s) when creating instance
`js
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
`js
document.addEventListener('DOMContentLoaded', function () {
const moveTo = new MoveTo({
duration: 1000,
callback: function (target) {
// This will run if there is no overwrite
}
});
const trigger = document.getElementsByClassName('js-trigger')[0];
moveTo.registerTrigger(trigger, function (target) {
// Overwrites global callback
});
// Or
moveTo.move(1200, {
duration: 500,
callback: function () {
// Overwrites global callback
}
});
});
`
Unregister a trigger
`js
document.addEventListener('DOMContentLoaded', function () {
const moveTo = new MoveTo();
const trigger = document.getElementsByClassName('js-trigger')[0];
// Register a trigger
const unregister = moveTo.registerTrigger(trigger, { duration: 500 });
// Unregister a trigger
unregister();
});
`
Back to top
`js
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]);
}
});
`
`html`
Back to top!
`shTo install dev dependencies run:
$ yarn
$ npm install
$ yarn start
$ npm run start
$ yarn lint
$ npm run lint
$ yarn build
$ npm run build
$ yarn test
$ npm test
``
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.
Copyright (c) 2017 Hasan Aydoğdu. See the LICENSE file for license rights and limitations (MIT).