{"id":21574295,"url":"https://github.com/bagusindrayana/scrollpage-js","last_synced_at":"2025-04-10T16:12:02.497Z","repository":{"id":44747132,"uuid":"451697325","full_name":"bagusindrayana/scrollpage-js","owner":"bagusindrayana","description":"Single Full Page Scroll Animation","archived":false,"fork":false,"pushed_at":"2022-10-12T01:02:22.000Z","size":95,"stargazers_count":27,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T14:01:34.206Z","etag":null,"topics":["animation","animation-effects","animation-library","javascript","scroll","scrolling"],"latest_commit_sha":null,"homepage":"","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/bagusindrayana.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}},"created_at":"2022-01-25T01:43:58.000Z","updated_at":"2024-01-03T04:58:52.000Z","dependencies_parsed_at":"2022-08-29T15:22:27.105Z","dependency_job_id":null,"html_url":"https://github.com/bagusindrayana/scrollpage-js","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bagusindrayana%2Fscrollpage-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bagusindrayana%2Fscrollpage-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bagusindrayana%2Fscrollpage-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bagusindrayana%2Fscrollpage-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bagusindrayana","download_url":"https://codeload.github.com/bagusindrayana/scrollpage-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247842753,"owners_count":21005341,"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","animation-effects","animation-library","javascript","scroll","scrolling"],"created_at":"2024-11-24T12:09:24.851Z","updated_at":"2025-04-10T16:12:02.481Z","avatar_url":"https://github.com/bagusindrayana.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# scrollpage-js\n![npm (scoped)](https://img.shields.io/npm/v/scrollpage-js)\n\nSingle full page scroll animation inspired by fullPage JS\n\n- DEMO : http://scrollpage-js.netlify.app/\n- CODEPEN : https://codepen.io/bagusindrayana/pen/QWOWKeY\n\n\n## Installation using npm\n\n```\nnpm i scrollpage-js\n```\n\n## Using CDN\n\n```\nhttps://cdn.jsdelivr.net/npm/scrollpage-js/scrollpage.js\n```\n\n## Usage\n\nHTML\n\n```html\n\u003cdiv  id=\"main-page\"\u003e\n    \u003cdiv  id=\"page1\" class=\"page-item\"\u003e\u003c/div\u003e\n    \u003cdiv  id=\"page2\" class=\"page-item\"\u003e\u003c/div\u003e\n    \u003cdiv  id=\"page3\" class=\"page-item\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nCSS\n```css\n\n#main-page {\n    width: 100%;\n}\n\n#main-page .page-item {\n    width: 100%;\n    height: 100vh;\n}\n\n#page1 {\n    background-color: aquamarine;\n}\n\n#page2 {\n    background-color: blueviolet;\n}\n\n#page3 {\n    background-color: darkorange;\n}\n```\n\nJS\n```html\n\u003cscript src=\"./scrollpage.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const scrollPage = new ScrollPage(\"#main-page\"); \n\u003c/script\u003e\n```\n\n## Options\n\nsetting animation and duration, all animation reference from https://easings.net\n```js\nconst scrollPage = new ScrollPage(\"#main-page\",{\n      animation:\"easeInQuart\",//default easeInSine\n      time:1000, //default 500\n      scrollBar:true,//show or hide scrollbar (default false),\n      pageSelectedClass:\"active\",//css class name for page element if active or selected (default 'active')\n      menuSelectedClass:\"active\",//css class name for menu element if active or selected (default 'active')\n});\n```\n\nsetting per-pages\n```js\nconst scrollPage = new ScrollPage(\"#main-page\",{\n    pages:{\n\t    //for page 1\n        1:{\n            animation:\"easeInQuart\",\n            time:1000\n        },\n        //for page 2\n        2:{\n            animation:\"easeOutQuint\",\n            time:500\n        },\n        //for page 3\n        3:{\n            animation:\"easeOutCubic\",\n            time:700\n        }\n    }\n}); \n```\n\ntrigger scroll page if scrolling content reach bottom or top\n```js\nconst scrollPage = new ScrollPage(\"#main-page\", {\n    triggerScrollChildren:true//default false\n});\n```\n\n\nheight based or relative to parent height,you need to set height for parent or \"main-page\" element.relative options will also set `postion:relative` for parent element\n```js\nconst scrollPage = new ScrollPage(\"#main-page\", {\n    relative:true//default false\n});\n```\n\nnon relative scrollpage will be full 100% height of browser window/screen\n\nif you want make sub scrollpage inside another scrollpage make sure you use relative scrollpage and set height for sub scrollpage element.\nsee [example](https://github.com/bagusindrayana/scrollpage-js/blob/master/examples/relative.html)\n\n\n\n## Event \u0026 Method\n\n- `onScroll(e)` will be fired if the mouse wheel is scrolling or touch swipe\n- `onMove(e)` will fire if animation is playing/page is moving or scrolling\n- `onStart(e)` will fire before the animation plays/page start moving or scrolling\n- `onFinish(e)` will be fired after the animation finishes playing/page finish moving or scrolling\n- `on(pageName,e)` will fire if move or scrolling to a specific page (based on page element `id` if there is value otherwise will be based on page sequence number starting from 1)\n- `moveTo(page,options)` move to spesific page (you can pass string,number or DOM object to `page` argument)\n\nall response values from the event will be in this format\n```js\n{\n    sp,// scrollpage object\n    currentPage,// current page number (origin page)\n    nextPage,// next page number (destination page)\n    currentPageName,// current page name (if have `id` otherwise  will olny return page number)\n    nextPageName,// next page name (if have `id` otherwise  will olny return page number)\n    index,// current page index (start from 0)\n}\n```\n\n\n### Example\n\n```js\nscrollPage.onScroll(function(e){\n    console.log(\"Leaving from : \"+e.currentPageName);//only fire if you keep scroll your mouse wheel\n    console.log(\"Scroll to : \"+e.nextPageName);\n});\n\nscrollPage.onMove(function(e){\n    console.log(\"Move to : \"+e.nextPageName);//will be fired every frame along with the animation (both moving with menu or mouse wheel)\n});\n\nscrollPage.onStart(function(e){\n    console.log(\"The previous page was : \"+e.currentPageName);\n    console.log(\"The next page is : \"+e.nextPageName);\n});\n\nscrollPage.onFinish(function(e){\n    console.log(\"Arrived at : \"+e.currentPageName); //will have same value as next page because is already arrived/finish\n    console.log(\"Done Go to : \"+e.nextPageName);\n});\n\nscrollPage.on('page3',function(e){\n    console.log(\"Event 1 on : \"+e.currentPageName); //will have same value as next page\n    console.log(\"Event 2 on : \"+e.nextPageName);\n});\n```\n\n\n## Menu\nyou can add a custom menu that works to control the page, this will read every element that is in the menu element and if those elements are clicked it will redirect to the page based on the `data-page` attribute\n\nevery selected menu both menu item and page element will be add `active` class, you can change class name with `pageSelectedClass` and `menuSelectedClass` in options\n\n```html\n\u003cul class=\"side-nav\"\u003e\n    \u003c!-- add the `data-page` attribute that contains the selector to the page elemen --\u003e\n    \u003cli data-page=\"#page1\" \u003ePage 1\u003c/li\u003e\n    \u003cli data-page=\"#page2\" \u003ePage 2\u003c/li\u003e\n    \u003cli data-page=\"#page3\" \u003ePage 3\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n```js\nconst scrollPage = new ScrollPage(\"#main-page\",{\n    menu:\"ul.side-nav\",//menu selector\n});\n```\n\n## More Advance Menu by Scott Rhamy @cycle4passion\n\nIn this example the menu will only display dots and on hover will show the page name.just using css\n[CODEPEN](https://codepen.io/bagusindrayana/pen/jOaQJmx)\n\n\n\n## Resource \u0026 Reference\n\n- https://alvarotrigo.com/fullPage/\n- https://stackoverflow.com/questions/48068487/full-page-scrolling-with-plain-javascript\n- https://codepen.io/brian-chen/pen/eKpMrX\n- https://easings.net\n\n\n## Issue / Features Requests / Contribution\n- You can report errors, problems, bugs, or other problems via the github issue, I'll try to respond as soon as possible\n- for the current case, the features that are currently available are enough for me but of course it doesn't rule out the possibility of developing other features if you have other feature ideas you can request it if possible I will implement it soon\n- this is my first javascript library/package so maybe my code is a bit messy and a bit difficult to understand but of course I am open to all suggestions and criticisms that you give you can also change the code as you like, if you want to contribute I will try my best to put everything together","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbagusindrayana%2Fscrollpage-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbagusindrayana%2Fscrollpage-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbagusindrayana%2Fscrollpage-js/lists"}