hsnaydd / moveto Goto Github PK

View Code? Open in Web Editor NEW

2.9K 39.0 93.0 2.94 MB

A lightweight scroll animation javascript library without any dependency

Home Page: https://hsnaydd.github.io/moveTo/demo/

License: MIT License

JavaScript 100.00%

moveto scrolling lightweight scroll smooth-scrolling animation scroll-animations smooth click-to-scroll

moveto's Introduction

MoveTo

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

Demo

Installation

Using npm

$ npm install moveto --save

Using Yarn

$ yarn add moveto

Usage

const moveTo = new MoveTo();

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

moveTo.move(target);

// Or register a trigger

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

moveTo.registerTrigger(trigger);

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:

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

<!-- Or -->

<button type="button" class="js-trigger" data-target="#target" data-mt-duration="300">Trigger</button>

Options

The following options are available:

new MoveTo({
  tolerance: 0,
  duration: 800,
  easing: 'easeOutQuart',
  container: window
})

Option	Default	Description
tolerance	0	The tolerance of the target to be scrolled, can be negative or positive
duration	800	Duration of scrolling, in milliseconds
easing	easeOutQuart	Ease function name
container	window	The container been computed and scrolled
callback	noop	The function to be run after scrolling complete. Target passes as the first argument

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

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

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

Unregister a trigger

document.addEventListener('DOMContentLoaded', function () {
  const moveTo = new MoveTo();

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

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

  // Unregister a trigger
  unregister();
});

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

<a href="#" class="js-back-to-top" data-mt-duration="300">Back to top!</a>

Development setup

# To install dev dependencies run:

$ yarn

# Or so if using npm:

$ npm install

# To start the development server run:

$ yarn start

# Or so if using npm:

$ npm run start

# To lint your code run:

$ yarn lint

# Or so if using npm:

$ npm run lint

# To make a full new build run:

$ yarn build

# Or so if using npm:

$ npm run build

# To run tests:

$ yarn test

# Or so if using npm:

$ npm test

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

moveto's People

Contributors

Stargazers

Watchers

Forkers

mjunaidi lex111 tddmanju puppycodes carabina 374632897 lyrl 2917 tarjei johnbacon designtips tngamemo alvarlaigna fengweijp hhy5277 wpfpizicai git2358 liamka dringala kubilzade empia lzwaiwai semanticpaint tdhight g2r jerry-goodboy roliveira-com lospeach jnasoy yuzin81 hu19891110 resfront lichengtao1989 vinks gottaboy ydream fannon mlaurel moonlight-dev piterskiy lee66 wadizorg umarmughal icetee chenzo a973c reelcitizen bojko-evgen hparton labibllaca cube3power wyrover jlit jameswquinn qinkangwu myvipbackup2 xinhualufang noyid 189 91cola mhaagen fedealu hileix pea3nut reika0717 super-contrib presleyhank onzieme mibakend qingbeefed sendilkumarj basemnassar11 segore sokolandia kartaviy-arteom zhangzihaodt bwonur fotopretty fisher5991 xixizizixixi yanchao0204 webee luinkalina deepakgudi-pixel johnboy-max mistermike yuririn quentinjuhel laskydev ahmed0saber ryanford nikhilbhateja22 siabox

moveto's Issues

Incorrectly looking target

I think need move target (https://github.com/hsnaydd/moveTo/blob/master/src/moveTo.js#L94) into listener (https://github.com/hsnaydd/moveTo/blob/master/src/moveTo.js#L103).

Not Working in Firefox

The smooth scroll doesn't seem to work in Firefox.

Here's a demo pen.

https://codepen.io/anon/pen/aGXJzB

Oops. Sorry. Forgot FF version.

60.0.1 (64-bit)

No addons installed.

Multiple moveTo triggers doesn't work

I have 2 navs on the page. Mobile and desktop. I want MoveTo in both navs. If I do

<a href="#bazinga" class="js-trigger" data-mt-duration="300">Anchor Link</a>
<a href="#bazinga" class="js-trigger" data-mt-duration="300">Anchor Link 2</a>

Only first smooth scroll is working!

Doesn't use proper browser History

Scrolling about from #A to #Z does not effect the URL in the browser bar, nor does it modify the window.history
If a user presses "back", the URL will change completely, not "back up" to an earlier internal #link.

Offset for fixed header

Hi,

Are there any options for offset to avoid the fixed header?

doesnt work in flex div

i tried it in this http://jsfiddle.net/5ochqtjy/

but it doesnt scroll the article.
any solution?

Top margin of the first section ignored when scroll to top

In my case, the top margin of the first section is ignored when scroll back to top. I have to use padding instead of margin or wrap the sections in a container div.

NOT WORKING :

<body>
      <section></section>
      <section></section>
      <section></section>
      <button>Back to top</button>
</body>

section {
      margin: 50px 0 0 0;
}

WORKING :

<body>
      <section></section>
      <section></section>
      <section></section>
      <button>Back to top</button>
</body>

section {
      padding: 50px 0 0 0;
}

<body>
      <div class="wrapper">
            <section></section>
            <section></section>
            <section></section>
            <button>Back to top</button>
      </div>
</body>

section {
      margin: 50px 0 0 0;
}

Links don’t update URL with #hash

Though it’s nice to have a slow scroll to the ID on a page, the whole point of such anchors is to keep URL updated with current page fragment ID you’ve just been scrolled to. By removing built-in functionaity you make such links less accessible by users. Buttons and links are two different things even if you could make them look similar with JS.

Please add some History API magic or figure out a way to have ID to be added to URL but prevent page from jumping. Otherwise this script should be considered harmful to web UX.

SyntaxError: Unexpected token: punc ()) - version 1.5.2

I'm currently including moveto in a project and it appears to work great in development.

However when I attempt a production build with webpack it will throw an error from Uglify:
ERROR in vendor.js from UglifyJs
SyntaxError: Unexpected token: punc ()) [vendor.js:xx,xx]

commenting out the import will allow the build to be successful:
import MoveTo from 'moveto';

Any help appreciated.

Can this package support server side ?

I see the window expose at the outside so when I run into nodejs runtime it will crash

Problem with request animation frame loop

After encountering problems where the window simply wasn't scrolled, despite a correct call to the move function I started looking around in the code and found a problem in the request animation frame loop. Basically if the duration is too long but the scroll change is too little, the loop is exited after the first iteration because the window was scrolled less than half a pixel, therefore lastPageYOffset and currentPageYOffset remain the same.

A possible solution could be, to simply change this

if (lastPageYOffset && from === to) {
  if (
    lastPageYOffset === currentPageYOffset ||
    change > 0 && lastPageYOffset > currentPageYOffset ||
    change < 0 && lastPageYOffset < currentPageYOffset)
  {
    return options.callback(target);
  }
}

to this

if (currentPageYOffset === to) {
  return options.callback(target);
}

Now this might have unintended consequences I don't realize, but some form of check to see if the window actually scrolled to where it's supposed to could make sense.

cheers

Some minifications suggestions

Great work! I really like this kind of tiny masterpieces, instead of overcomplicated stuff soo common nowadays... This is not an issue at all. Just a few suggestions to get the code even smaller after minification.

1_ cache prototype object:

var proto = MoveTo.prototype;

Before minification:

var proto = MoveTo.prototype:
proto.registerTrigger = function(){ };
proto.move = function(){ };
proto.addEaseFunction = function(){ };

After minification:

var p=MoveTo.prototype:p.registerTrigger=function(){};p.move=function(){};p.addEaseFunction=function(){};

Minification without caching:

MoveTo.prototype.registerTrigger=function(){};MoveTo.prototype.move=function(){};MoveTo.prototype.addEaseFunction=function(){};

2_ save some methods and properties in strings, and later use brackets notation. For example, the getAttribute methods:

Before minification:

var _getAttribute = 'getAttribute':
var attr1 = elem[_getAttribute]('data-attr-1');
var attr1 = elem[_getAttribute]('data-attr-2');
var attr3 = elem[_getAttribute]('data-attr-3');

After minification:

var a='getAttribute',b=e[a]('data-attr-1'),c=e[a]('data-attr-2'),d=e[a]('data-attr-3');

Minification without caching:

var b=e.getAttribute('data-attr-1'),c=e.getAttribute('data-attr-2'),d=e.getAttribute('data-attr-3');

You can "cache" some others objects/properties more... like "forEach"

Yeah... I know that the differences are insignificant, but is a good practice and even more important if you plan to extend some functionality or add more methods to the constructor...

Anyway good work!

Second click moves page on Top

I noticed that if I do second click on link (after I scroll to needed element) MoveTo jumps to Top of the page. Not sure why it's happening without my knowledge. Is this a desired behavior? Can I turn this off?

Update polyfill document

Run moveTo on Edge will faced with this error:

Object doesn't support property or method 'scroll'
at ./node_modules/moveto/dist/moveTo.js in loop at line 180:7

It because Edge not support Element.scroll. So we need to add this polyfill: https://github.com/idmadj/element-scroll-polyfill

Lazy loading images

Hi, can you add an "step" option (like jQuery.animate) in the library to re-calculate the final position if there are lazy loading images in the page?

Eg:

step: function( now, fx ) {
   var newOffset = $target.offset().top;
   if(fx.end !== newOffset)
     fx.end = newOffset;
}

Regards