Configurable Smooth Scroll Animation In Vanilla JavaScript – moveTo.js

Category: Animation , Javascript , Recommended | March 24, 2017
Author: hsnaydd
Views Total: 1,217
Official Page: Go to website
Last Update: March 24, 2017
License: MIT

Preview:

Configurable Smooth Scroll Animation In Vanilla JavaScript – moveTo.js

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