{"id":19356875,"url":"https://github.com/alexfigliolia/page-switch","last_synced_at":"2026-03-04T09:01:44.447Z","repository":{"id":218291205,"uuid":"746064726","full_name":"alexfigliolia/page-switch","owner":"alexfigliolia","description":"A page animation library based on the clever work of @qiqiboy","archived":false,"fork":false,"pushed_at":"2026-02-05T18:24:40.000Z","size":126,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-06T04:16:58.545Z","etag":null,"topics":["animation","image-slider"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@figliolia/page-switch","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexfigliolia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-01-21T00:23:21.000Z","updated_at":"2026-02-05T18:24:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"0b408738-a048-4919-b4f3-d383b441f7d8","html_url":"https://github.com/alexfigliolia/page-switch","commit_stats":null,"previous_names":["alexfigliolia/page-switch"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alexfigliolia/page-switch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fpage-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fpage-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fpage-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fpage-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexfigliolia","download_url":"https://codeload.github.com/alexfigliolia/page-switch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fpage-switch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30076935,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T08:01:56.766Z","status":"ssl_error","status_checked_at":"2026-03-04T08:00:42.919Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","image-slider"],"created_at":"2024-11-10T07:05:43.986Z","updated_at":"2026-03-04T09:01:44.422Z","avatar_url":"https://github.com/alexfigliolia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Page Switch\nA slider animation library supporting\n1. Drag, pointer, touch, mouse, and scroll events\n2. More than 50 built-in animations and visual variations\n3. Any frontend framework and/or vanilla JS\n\n### Installation\n```bash\nnpm i @figliolia/page-switch\n# or\nyarn add @figliolia/page-switch\n```\n\n### Basic Usage\nTo create your slider, grab a reference to your container element or its ID and pass it to the `PageSwitch` constructor with the options you want to use:\n```typescript\nimport { PageSwitch } from \"@figliolia/page-switch\";\n\nconst Switcher = new PageSwitch(\"\u003ccontainer element or ID\u003e\", {\n  duration: 750, // animation duration when scrolling or swiping\n  direction: 1, // Horizontal (0) or Vertical (1)\n  transition: \"slide\", // Which animation to use\n  start: 0, // Which index to display first\n  loop: true, // Whether your pages should loop or end when your last page is reached\n  mousewheel: true, // Whether to enable mouse wheel scrolling\n  mouse: true, // Whether to enable dragging with your mouse\n  arrowKey: true, // Whether to enable animating using your directional keys\n  autoplay: false // Whether to allow the slider to animate freely\n  ease: \"linear\" // The name of a built-in easing function or an easing function of your own\n});\n```\nUpon creating your instance, the `PageSwitch` class will take care of positioning your container and children elements so that they transition smoothly.\n\n### The API\nThe `PageSwitch` interface also provides a handful of public methods for you to more easily control your slider programmatically:\n#### PageSwitch.play();\nThe play method will trigger the auto-play feature and begin transition between your pages in order using the `interval` you passed as an option. This `interval` can be adjusted on the fly by simply assigning it a new value:\n```typescript\nconst PW = new PageSwitch(/* options */);\nPW.setInterval(5000);\n```\n\n#### PageSwitch.pause()\nThe pause method will stop the auto-play feature when in use. It can be resumed again be calling the `play()` method or by calling `setInterval()` with a new value\n\n#### PageSwitch.previous()\nMoves the slider to the previous slide\n\n#### PageSwitch.next()\nMoves the slider to the next slide\n\n#### PageSwitch.freeze()\nThis method will pause all activity to the slider - including events invoked by dragging and scrolling\n\n#### PageSwitch.destroy()\nThis method can be used to clean up your `PageSwitch` instance\n\n#### PageSwitch.append(element: HTMLElement, index?: number)\nAppends new elements to your slider at the specified position. When omitting the `index` parameter, the new element will be placed in the last position\n\n#### PageSwitch.prepend(element: HTMLElement)\nAppends a new element to your slider in the zeroth position\n\n#### PageSwitch.insertBefore(element: HTMLElement, index)\nPlaces a new element before the specified index\n\n#### PageSwitch.insertAfter(element: HTMLElement, index)\nPlaces a new element after the specified index\n\n#### PageSwitch.remove(index: number)\nRemoves the child at the specified index\n\n#### PageSwitch.setInterval(milliseconds: number) \nSets the amount of time the slider should remain on any given page when using the auto-play feature. When setting the interval, the auto-play will begin running if not already. If you'd like to set the interval without beginning the auto play feature, you can assign the interval a new value using `PageSwitch.interval = \u003cyour value\u003e`\n\n#### PageSwitch.setEasing(easing: EasingString | EasingFN);\nUpdates the easing function used to transition between slides. Valid built-in easing functions are:\n1. \"linear\"\n2. \"ease\"\n3. \"ease-in\"\n4. \"ease-out\"\n5. \"ease-in-out\"\n6. \"bounce\"\n\nTo add your own custom easing functions, pass in any valid bezier easing function: \n`(t: number, b: number, c: number, d: number) =\u003e number`\n\n#### PageSwitch.setTransition(transition: Transition | TransitionFN)\nThis method will allow you to swap animations on the fly for any reason - like if the browser resizes or a user prefers reduced motion. You may also pass in a transition function of your own if you wish to customize your `PageSwitch` visuals. Transition functions work in accordance with the following syntax:\n\n```typescript\nconst myTransitionFN = (\n  currentPage: HTMLElement, // the currently visible page element\n  currentPosition: number, // the transition progress of the current element\n  nextPage?: HTMLElement, // the next element - either ahead or behind the current depending on the user's gesturing\n  nextPosition?: number // the transition progress of the next element\n) =\u003e {\n  // Operations on your DOM elements\n  // To transition opacity, one might do the following:\n  currentPage.style.opacity = `${1 - Math.abs(currentPosition)}`;\n  if (nextPage) {\n    nextPage.style.opacity = `${Math.abs(currentPosition)}`;\n  }\n};\n```\nIn the above example, you may have noticed the reference check on the `nextPage` element. For most sliders, which loop back to the first element when reaching the end, the `nextPage` and `nextPosition` parameters will never be undefined. However, if the user chooses to not set the `loop` option to `true`, transitioning beyond the last element is disabled and these parameters will be `undefined` in these cases.\n\n### Events\nYour `PageSwitch` instance will emit the following events allowing you to coordinate customized visual logic with `PageSwitch's` internals:\n#### Before\nAn event fired the moment before a page transitions to the following page\n\n```typescript\nconst PW = new PageSwitch(/* options */);\n\nPW.on(\"before\", (currentIndex: number, nextIndex: number) =\u003e {\n  // Execute your logic!\n});\n```\n\n#### After\nAn event fired immediately after a page transitions to the following page\n\n```typescript\nconst PW = new PageSwitch(/* options */);\n\nPW.on(\"after\", (currentIndex: number, previousIndex: number) =\u003e {\n  // Execute your logic!\n});\n```\n\n#### Update\nAn event fired on each frame containing each transition function parameter\n\n```typescript\nconst PW = new PageSwitch(/* options */);\n\nPW.on(\"update\", (\n  currentPage: HTMLElement, \n  currentPosition: number,\n  nextPage?: HTMLElement,\n  nextPosition?: number\n) =\u003e {\n  // Create cool parallax effects! \n  // Keep in mind, this event will fire at 60 FPS\n});\n```\n\n#### Drag Start\nAn event fired at the beginning of each drag\n\n```typescript\nconst PW = new PageSwitch(/* options */);\n\nPW.on(\"dragStart\", (event: DragEvent) =\u003e {\n  // Execute your logic\n});\n```\n\n#### Drag Move\nAn event fired on each drag movement\n\n```typescript\nconst PW = new PageSwitch(/* options */);\n\nPW.on(\"dragMove\", (event: DragEvent) =\u003e {\n  // Execute your logic\n});\n```\n\n#### Drag End\nAn event fired on the end of each drag\n\n```typescript\nconst PW = new PageSwitch(/* options */);\n\nPW.on(\"dragEnd\", (event: DragEvent) =\u003e {\n  // Execute your logic\n});\n```\n\n### Demo\nI'm sure the moment most readers have been waiting for. Here's a [really cool demo](https://github.boy.im/pageSwitch/pic.html) created by the original author @qiqiboy.\n\nIf you're wondering why I decided to rewrite the original library please read on.\n\nThe author who created this library did so over ten years ago - dealing with all of the nuanced browser incompatibilities. In spite of this, it's one of the best open-source slider animation libraries in existence. The library never relied on JQuery or any other framework that may bloat its size - or would make standardizing it across browsers easier. The original author really knew his stuff.\n\nOver time, there began to be some browser compatibility issues as certain legacy API's began to be phased out. Because the original author has since moved on, and I used this library in a ton of client websites and apps back in the day, I felt the desire to fix the incoming issues as well as try to modernize it a bit for new projects.\n\nI've used this library with Svelte, React, Vue - just about every modern framework and it continues to hold up nicely. If you wish to check out the original, it can be found [here.](https://github.com/qiqiboy/pageSwitch).\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexfigliolia%2Fpage-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexfigliolia%2Fpage-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexfigliolia%2Fpage-switch/lists"}