{"id":15034725,"url":"https://github.com/hsnaydd/moveto","last_synced_at":"2025-05-14T04:07:44.355Z","repository":{"id":18531705,"uuid":"84540178","full_name":"hsnaydd/moveTo","owner":"hsnaydd","description":"A lightweight scroll animation javascript library without any dependency ","archived":false,"fork":false,"pushed_at":"2024-07-23T05:25:57.000Z","size":3147,"stargazers_count":2874,"open_issues_count":5,"forks_count":95,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-05-12T17:19:42.264Z","etag":null,"topics":["animation","click-to-scroll","lightweight","moveto","scroll","scroll-animations","scrolling","smooth","smooth-scrolling"],"latest_commit_sha":null,"homepage":"https://hsnaydd.github.io/moveTo/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hsnaydd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-10T08:58:15.000Z","updated_at":"2025-03-26T05:33:00.000Z","dependencies_parsed_at":"2024-03-18T06:32:05.971Z","dependency_job_id":"17067629-ca78-4f5b-a095-df0f7d30baa1","html_url":"https://github.com/hsnaydd/moveTo","commit_stats":{"total_commits":173,"total_committers":11,"mean_commits":"15.727272727272727","dds":0.2774566473988439,"last_synced_commit":"025cba04d19c54c6e56019657110128c100fa565"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnaydd%2FmoveTo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnaydd%2FmoveTo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnaydd%2FmoveTo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hsnaydd%2FmoveTo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hsnaydd","download_url":"https://codeload.github.com/hsnaydd/moveTo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254069593,"owners_count":22009558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","click-to-scroll","lightweight","moveto","scroll","scroll-animations","scrolling","smooth","smooth-scrolling"],"created_at":"2024-09-24T20:26:08.614Z","updated_at":"2025-05-14T04:07:44.331Z","avatar_url":"https://github.com/hsnaydd.png","language":"JavaScript","readme":"# MoveTo [![Version](https://img.shields.io/npm/v/moveto.svg?style=flat)](https://www.npmjs.com/package/moveto) [![CDNJS version](https://img.shields.io/cdnjs/v/moveTo.svg?style=flat)](https://cdnjs.com/libraries/moveTo) [![CI Status](https://github.com/hsnaydd/moveTo/actions/workflows/pr.yml/badge.svg)](https://github.com/hsnaydd/moveTo/actions/workflows/pr.yml)\n\nA lightweight (only 1kb gzipped) scroll animation javascript library without any dependency.\n\n[Demo](https://hsnaydd.github.io/moveTo/demo/)\n\n## Installation\n\n### Using npm\n\n```sh\n$ npm install moveto --save\n```\n\n### Using Yarn\n\n```sh\n$ yarn add moveto\n```\n\n## Usage\n\n```js\nconst moveTo = new MoveTo();\n\nconst target = document.getElementById('target');\n\nmoveTo.move(target);\n\n// Or register a trigger\n\nconst trigger = document.getElementsByClassName('js-trigger')[0];\n\nmoveTo.registerTrigger(trigger);\n\n```\n\nTrigger HTML markup\n\nYou can pass all options as data attributes with the `mt` prefix. Option name should be written in kebab case format, for example:\n\n```html\n\u003ca href=\"#target\" class=\"js-trigger\" data-mt-duration=\"300\"\u003eTrigger\u003c/a\u003e\n\n\u003c!-- Or --\u003e\n\n\u003cbutton type=\"button\" class=\"js-trigger\" data-target=\"#target\" data-mt-duration=\"300\"\u003eTrigger\u003c/button\u003e\n```\n\n## Options\n\nThe following options are available:\n\n```js\nnew MoveTo({\n  tolerance: 0,\n  duration: 800,\n  easing: 'easeOutQuart',\n  container: window\n})\n```\n\n| Option    | Default      | Description                                                                          |\n|-----------|--------------|--------------------------------------------------------------------------------------|\n| tolerance | 0            | The tolerance of the target to be scrolled, can be negative or positive              |\n| duration  | 800          | Duration of scrolling, in milliseconds                                               |\n| easing    | easeOutQuart | Ease function name                                                                   |\n| container | window       | The container been computed and scrolled\n| callback  | noop         | The function to be run after scrolling complete. Target passes as the first argument |\n\n## API\n\n### move(target, options)\n\nStart scroll animation from current position to the anchor point.\n\n#### target\nType: HTMLElement|Number\n\nTarget element/position to be scrolled. Target position is the scrolling distance. It must be negative if the upward movement is desired.\n\n#### options\nType: Object\n\nPass custom options.\n\n### registerTrigger(trigger, callback)\n\n#### trigger\nType: HTMLElement\n\nThis is the trigger element for starting to scroll when on click.\n\n#### callback\n\nThis is the callback function to be ran after the scroll completes. This will overwrite the callback option.\n\n### addEaseFunction(name, fn)\n\nAdds custom ease function.\n\n#### name\nType: String\n\nEase function name.\n\n#### fn\nType: Function\n\nEase function. See [Easing Equations](http://gizma.com/easing/) for more ease functions.\n\n## Examples\n\n\u003cdetails\u003e\n  \u003csummary\u003ePass ease function(s) when creating an instance\u003c/summary\u003e\n\n  ```js\n  document.addEventListener('DOMContentLoaded', function () {\n    const easeFunctions = {\n      easeInQuad: function (t, b, c, d) {\n        t /= d;\n        return c * t * t + b;\n      },\n      easeOutQuad: function (t, b, c, d) {\n        t /= d;\n        return -c * t* (t - 2) + b;\n      }\n    }\n\n    const moveTo = new MoveTo({\n      duration: 1000,\n      easing: 'easeInQuad'\n    }, easeFunctions);\n\n    const trigger = document.getElementsByClassName('js-trigger')[0];\n\n    moveTo.registerTrigger(trigger);\n  });\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eWorking with callback function\u003c/summary\u003e\n\n  ```js\n  document.addEventListener('DOMContentLoaded', function () {\n    const moveTo = new MoveTo({\n      duration: 1000,\n      callback: function (target) {\n        // This will run if there is no overwrite\n      }\n    });\n\n    const trigger = document.getElementsByClassName('js-trigger')[0];\n\n    moveTo.registerTrigger(trigger, function (target) {\n      // Overwrites global callback\n    });\n\n    // Or\n\n    moveTo.move(1200, {\n      duration: 500,\n      callback: function () {\n        // Overwrites global callback\n      }\n    });\n  });\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eUnregister a trigger\u003c/summary\u003e\n\n  ```js\n  document.addEventListener('DOMContentLoaded', function () {\n    const moveTo = new MoveTo();\n\n    const trigger = document.getElementsByClassName('js-trigger')[0];\n\n    // Register a trigger\n    const unregister = moveTo.registerTrigger(trigger, { duration: 500 });\n\n    // Unregister a trigger\n    unregister();\n  });\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eBack to top\u003c/summary\u003e\n\n  ```js\n  document.addEventListener('DOMContentLoaded', function () {\n    const moveTo = new MoveTo();\n    const triggers = document.getElementsByClassName('js-back-to-top');\n\n    for (var i = 0; triggers.length \u003c i; i++) {\n      moveTo.registerTrigger(triggers[i]);\n    }\n  });\n  ```\n\n  ```html\n  \u003ca href=\"#\" class=\"js-back-to-top\" data-mt-duration=\"300\"\u003eBack to top!\u003c/a\u003e\n  ```\n\u003c/details\u003e\n\n## Development setup\n\n```sh\n# To install dev dependencies run:\n\n$ yarn\n\n# Or so if using npm:\n\n$ npm install\n\n# To start the development server run:\n\n$ yarn start\n\n# Or so if using npm:\n\n$ npm run start\n\n# To lint your code run:\n\n$ yarn lint\n\n# Or so if using npm:\n\n$ npm run lint\n\n# To make a full new build run:\n\n$ yarn build\n\n# Or so if using npm:\n\n$ npm run build\n\n# To run tests:\n\n$ yarn test\n\n# Or so if using npm:\n\n$ npm test\n```\n\n## Browser support\n\nIt 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](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) and [Element.scroll](https://github.com/idmadj/element-scroll-polyfill).\n\n## License\n\nCopyright (c) 2017 Hasan Aydoğdu. See the [LICENSE](/LICENSE) file for license rights and limitations (MIT).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsnaydd%2Fmoveto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhsnaydd%2Fmoveto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhsnaydd%2Fmoveto/lists"}