- Notifications
You must be signed in to change notification settings - Fork94
A lightweight scroll animation javascript library without any dependency
License
hsnaydd/moveTo
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A lightweight (only 1kb gzipped) scroll animation javascript library without any dependency.
$ npm install moveto --save
$ yarn add moveto
constmoveTo=newMoveTo();consttarget=document.getElementById('target');moveTo.move(target);// Or register a triggerconsttrigger=document.getElementsByClassName('js-trigger')[0];moveTo.registerTrigger(trigger);
Trigger HTML markup
You can pass all options as data attributes with themt prefix. Option name should be written in kebab case format, for example:
<ahref="#target"class="js-trigger"data-mt-duration="300">Trigger</a><!-- Or --><buttontype="button"class="js-trigger"data-target="#target"data-mt-duration="300">Trigger</button>
The following options are available:
newMoveTo({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 |
Start scroll animation from current position to the anchor point.
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.
Type: Object
Pass custom options.
Type: HTMLElement
This is the trigger element for starting to scroll when on click.
This is the callback function to be ran after the scroll completes. This will overwrite the callback option.
Adds custom ease function.
Type: String
Ease function name.
Type: Function
Ease function. SeeEasing Equations for more ease functions.
Pass ease function(s) when creating an instance
document.addEventListener('DOMContentLoaded',function(){consteaseFunctions={easeInQuad:function(t,b,c,d){t/=d;returnc*t*t+b;},easeOutQuad:function(t,b,c,d){t/=d;return-c*t*(t-2)+b;}}constmoveTo=newMoveTo({duration:1000,easing:'easeInQuad'},easeFunctions);consttrigger=document.getElementsByClassName('js-trigger')[0];moveTo.registerTrigger(trigger);});
Working with callback function
document.addEventListener('DOMContentLoaded',function(){constmoveTo=newMoveTo({duration:1000,callback:function(target){// This will run if there is no overwrite}});consttrigger=document.getElementsByClassName('js-trigger')[0];moveTo.registerTrigger(trigger,function(target){// Overwrites global callback});// OrmoveTo.move(1200,{duration:500,callback:function(){// Overwrites global callback}});});
Unregister a trigger
document.addEventListener('DOMContentLoaded',function(){constmoveTo=newMoveTo();consttrigger=document.getElementsByClassName('js-trigger')[0];// Register a triggerconstunregister=moveTo.registerTrigger(trigger,{duration:500});// Unregister a triggerunregister();});
Back to top
document.addEventListener('DOMContentLoaded',function(){constmoveTo=newMoveTo();consttriggers=document.getElementsByClassName('js-back-to-top');for(vari=0;triggers.length<i;i++){moveTo.registerTrigger(triggers[i]);}});
<ahref="#"class="js-back-to-top"data-mt-duration="300">Back to top!</a>
# 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:$ yarntest# Or so if using npm:$ npmtest
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 therequestAnimationFrame andElement.scroll.
Copyright (c) 2017 Hasan Aydoğdu. See theLICENSE file for license rights and limitations (MIT).
About
A lightweight scroll animation javascript library without any dependency