Configurable Smooth Scroll Animation In Vanilla JavaScript – moveTo.js

Preview:

Description:

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.

Installation:

# Yarn
yarn add moveto

# NPM
$ 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];
moveTo.registerTrigger(trigger);

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

const moveTo = new MoveTo();

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

moveTo.move(target);

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

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

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
    
})

Changelog:

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