Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hsnaydd/moveto
A lightweight scroll animation javascript library without any dependency
https://github.com/hsnaydd/moveto
animation click-to-scroll lightweight moveto scroll scroll-animations scrolling smooth smooth-scrolling
Last synced: 29 days ago
JSON representation
A lightweight scroll animation javascript library without any dependency
- Host: GitHub
- URL: https://github.com/hsnaydd/moveto
- Owner: hsnaydd
- License: mit
- Created: 2017-03-10T08:58:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-18T05:21:45.000Z (8 months ago)
- Last Synced: 2024-05-17T04:43:54.622Z (6 months ago)
- Topics: animation, click-to-scroll, lightweight, moveto, scroll, scroll-animations, scrolling, smooth, smooth-scrolling
- Language: JavaScript
- Homepage: https://hsnaydd.github.io/moveTo/demo/
- Size: 2.87 MB
- Stars: 2,858
- Watchers: 39
- Forks: 94
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MoveTo [](https://www.npmjs.com/package/moveto) [](https://cdnjs.com/libraries/moveTo) [](https://github.com/hsnaydd/moveTo/actions/workflows/pr.yml)
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
```
## 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 the `mt` prefix. Option name should be written in kebab case format, for example:
```html
Trigger
Trigger
```
## Options
The following options are available:
```js
new MoveTo({
tolerance: 0,
duration: 800,
easing: 'easeOutQuart',
container: window
})
```
| Option | Default | Description |
|-----------|--------------|--------------------------------------------------------------------------------------|
| 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 ran after the scroll completes. 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 functions.
## Examples
Pass ease function(s) when creating an 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 and Edge. To add support for older browsers, consider including polyfills/shims for the [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) and [Element.scroll](https://github.com/idmadj/element-scroll-polyfill).
## License
Copyright (c) 2017 Hasan Aydoğdu. See the [LICENSE](/LICENSE) file for license rights and limitations (MIT).