MoveTo Version CDNJS version CI Status

A lightweight (only 1kb gzipped) scroll animation javascript library without any dependency.



Using npm

$ npm install moveto --save

Using Yarn

$ yarn add moveto


const moveTo = new MoveTo();

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


// Or register a trigger

const trigger = document.getElementsByClassName('js-trigger')[0];


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:

<a href="#target" class="js-trigger" data-mt-duration="300">Trigger</a>

<!-- Or -->

<button type="button" class="js-trigger" data-target="#target" data-mt-duration="300">Trigger</button>


The following options are available:

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


move(target, options)

Start scroll animation from current position to the anchor point.


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.


Type: Object

Pass custom options.

registerTrigger(trigger, callback)


Type: HTMLElement

This is the trigger element for starting to scroll when on click.


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.


Type: String

Ease function name.


Type: Function

Ease function. See Easing Equations for more ease functions.


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

# 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 and Element.scroll.


Copyright (c) 2017 Hasan AydoÄźdu. See the LICENSE file for license rights and limitations (MIT).