Configurable Smooth Scroll Animation In Vanilla JavaScript – moveTo.js

Category: Animation , Javascript , Recommended | June 28, 2019
Author: hsnaydd
Views Total: 2,530 views
Official Page: Go to website
Last Update: June 28, 2019
License: MIT


Configurable Smooth Scroll Animation In Vanilla JavaScript – moveTo.js


moveTo.js is a lightweight JavaScript library that allows for scroll smoothly between content sections within the document. Powered by window.requestAnimationFrame() API and fully configurable via both JavaScript and Data attributes.


# Yarn
yarn add moveto

$ npm install moveto

# Bower
$ bower install moveto

Basic usage:

Create a trigger element pointing to the target element:

<a href="#target" class="js-trigger">Trigger Link</a>

<!-- Or -->

<button type="button" class="js-trigger" data-target="#target">Trigger Button</button>

Include the main JavaScript file moveTo.min.js at the end of the html page.

<script src="moveTo.min.js"></script>

Regist the trigger element.

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

Or start the scroll animation from the current position to the anchor point:

const moveTo = new MoveTo();

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


Config the scroll animation via ‘Data’ attributes as shown below.

<a href="#target" 

Or pass the option object as the second parameter to the MoveTo method.

new MoveTo({

    // The tolerance of the target to be scrolled
    tolerance: 0,

    // Duration of scrolling, in milliseconds
    duration: 800,

    // Ease function name
    easing: 'easeOutQuart',

    // run after scrolling complete
    callback: noop


v1.8.2 (06/28/2019)

  • Npm packages upgraded

v1.8.1 (05/08/2018)

  • Upgraded dependencies
  • Added npm scripts
  • Fixed the problem that linting the files not working correctly
  • Documentation updates

v1.8.0 (01/14/2018)

  • Fixed some eslint problems and some variable names changed

v1.7.3 (09/23/2018)

  • Bugfixed

You Might Be Interested In:

Leave a Reply