MoveTo

A lightweight scroll animation javascript library without any dependency

hsnaydd/moveTohsnaydd.github.io/moveTo/demo/moveto

README

MoveTo Version CDNJS version CI Status


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

Demo

Installation


Using npm


  1. ```sh
  2. $ npm install moveto --save
  3. ```

Using Yarn


  1. ```sh
  2. $ yarn add moveto
  3. ```

Usage


  1. ```js
  2. const moveTo = new MoveTo();

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

  6. moveTo.move(target);

  8. // Or register a trigger

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

  12. moveTo.registerTrigger(trigger);

  14. ```

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:

  1. ```html
  2. <a href="#target" class="js-trigger" data-mt-duration="300">Trigger</a>
  4. !-- Or -->
  6. <button type="button" class="js-trigger" data-target="#target" data-mt-duration="300">Trigger</button>
  7. ```

Options


The following options are available:

  1. ```js
  2. new MoveTo({
  3.   tolerance: 0,
  4.   duration: 800,
  5.   easing: 'easeOutQuart',
  6.   container: window
  7. })
  8. ```

OptionDefaultDescription
|-----------|--------------|--------------------------------------------------------------------------------------|
tolerance0The
duration800Duration
easingeaseOutQuartEase
containerwindowThe
callbacknoopThe

API


move(target, options)


Start scroll animation from current position to the anchor point.

target

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.

options

Type: Object

Pass custom options.

registerTrigger(trigger, callback)


trigger

Type: HTMLElement

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

callback


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.

name

Type: String

Ease function name.

fn

Type: Function

Ease function. See Easing Equations for more ease functions.

Examples


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
      }
    });
  });
  1. ```
  2. </details>

  4. <details>
  5.   <summary>Unregister a trigger</summary>

  7.   ```js
  8.   document.addEventListener('DOMContentLoaded', function () {
  9.     const moveTo = new MoveTo();

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

  13.     // Register a trigger
  14.     const unregister = moveTo.registerTrigger(trigger, { duration: 500 });

  16.     // Unregister a trigger
  17.     unregister();
  18.   });
  19. ```

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


  1. ```sh
  2. # To install dev dependencies run:

  4. $ yarn

  6. # Or so if using npm:

  8. $ npm install

  10. # To start the development server run:

  12. $ yarn start

  14. # Or so if using npm:

  16. $ npm run start

  18. # To lint your code run:

  20. $ yarn lint

  22. # Or so if using npm:

  24. $ npm run lint

  26. # To make a full new build run:

  28. $ yarn build

  30. # Or so if using npm:

  32. $ npm run build

  34. # To run tests:

  36. $ yarn test

  38. # Or so if using npm:

  40. $ npm test
  41. ```

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.

License


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