# moveto
> A lightweight scroll animation javascript library without any dependency.
Latest version **1.8.2** (published 2019-06-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install moveto
pnpm add moveto
yarn add moveto
bun add moveto
```
## Health
**Score 33/100 (F)** — status: abandoned.
Positive: has types package; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 1.8.2 |
| Published | 2019-06-28 |
| First published | 2017-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/moveto) |
| Module format | CommonJS |
| Node | >=8.9.4 |
| Dependencies | 0 |
| Unpacked size | 35.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2852 |
| Author | Hasan Aydoğdu |
| Maintainers | hsnaydd |
| Keywords | simple, lightweight, scroll, animated, scrolling, animation, smooth, smoothscroll |
## Links
- npm: https://www.npmjs.com/package/moveto
- Repository: https://github.com/hsnaydd/moveTo
- Homepage: https://github.com/hsnaydd/moveTo#readme
- Issues: https://github.com/hsnaydd/moveTo/issues
- npm.io page: https://npm.io/package/moveto
## Alternatives
- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads
## Recent versions
- 1.8.2 (latest) — 2019-06-28
- 1.8.1 — 2019-05-07
- 1.8.0 — 2019-01-14
- 1.7.4 — 2018-09-28
- 1.7.3 — 2018-05-03
- 1.7.1 — 2017-10-21
- 1.7.0 — 2017-10-01
- 1.6.1 — 2017-04-12
- 1.6.0 — 2017-03-27
- 1.5.3 — 2017-03-24
- 1.5.2 — 2017-03-22
- 1.5.1 — 2017-03-18
- 1.5.0 — 2017-03-18
- 1.4.0 — 2017-03-15
- 1.3.0 — 2017-03-14
- … 4 more at https://npm.io/package/moveto/versions
## README
# MoveTo [](https://badge.fury.io/js/moveto) [](https://badge.fury.io/bo/moveTo) [](https://cdnjs.com/libraries/moveTo) [](https://travis-ci.org/hsnaydd/moveTo.js)
A lightweight (only 1kb gzipped) scroll animation javascript library without any dependency.
[Demo](https://hsnaydd.github.io/moveTo/demo/)
## Installation
### Using npm
```sh
$ npm install moveto --save
```
### Using Yarn
```sh
$ yarn add moveto
```
### Using Bower
```sh
$ bower install moveTo --save
```
## Usage
```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
```
## Options
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 |
## 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](http://gizma.com/easing/) for more ease function.
## Examples
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!
```
## Development setup
```sh
# To install dev dependencies run:
$ yarn
# Or so if using npm:
$ npm install
# To start the development server run:
$ yarn start
# Or so if using npm:
$ npm run start
# To lint your code run:
$ yarn lint
# Or so if using npm:
$ npm run lint
# To make a full new build run:
$ yarn build
# Or so if using npm:
$ npm run build
# To run tests:
$ yarn test
# Or so if using npm:
$ 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](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame).
## License
Copyright (c) 2017 Hasan Aydoğdu. See the [LICENSE](/LICENSE) file for license rights and limitations (MIT).
---
_Source: https://npm.io/package/moveto · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._