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.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