{"id":25938592,"url":"https://github.com/graphieros/scroll-concert","last_synced_at":"2026-03-07T06:32:42.055Z","repository":{"id":277413434,"uuid":"932348158","full_name":"graphieros/scroll-concert","owner":"graphieros","description":"A Simple Library for Synchronizing Scroll Events Across Multiple Elements","archived":false,"fork":false,"pushed_at":"2025-02-14T07:02:01.000Z","size":38,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-22T10:03:18.052Z","etag":null,"topics":["parallax","scroll"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/graphieros.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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":"2025-02-13T19:10:18.000Z","updated_at":"2025-02-14T07:05:13.000Z","dependencies_parsed_at":"2025-02-13T20:29:34.943Z","dependency_job_id":"7c3fb3a8-4e19-4bdb-a160-f0ecf74878d2","html_url":"https://github.com/graphieros/scroll-concert","commit_stats":null,"previous_names":["graphieros/scroll-concert"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/graphieros/scroll-concert","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fscroll-concert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fscroll-concert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fscroll-concert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fscroll-concert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphieros","download_url":"https://codeload.github.com/graphieros/scroll-concert/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fscroll-concert/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30209087,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T05:23:27.321Z","status":"ssl_error","status_checked_at":"2026-03-07T05:00:17.256Z","response_time":53,"last_error":"SSL_read: 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":["parallax","scroll"],"created_at":"2025-03-04T03:37:32.936Z","updated_at":"2026-03-07T06:32:42.035Z","avatar_url":"https://github.com/graphieros.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scroll Concert 🎶\n\n## A Simple Library for Synchronizing Scroll Events Across Multiple Elements\n\nScroll Concert is a lightweight JavaScript library designed to effortlessly sync scroll positions across multiple elements on your page. If you need synchronized scrolling behavior, Scroll Concert makes it easy to keep your scrollable elements in harmony. It is ideal to create parallax effects.\n\n### Features\n\n- **Multiple Leaders**: Sync multiple leader elements with one or more followers.\n- **Custom Speed Control**: Control how fast followers scroll in relation to the leader using a customizable speed ratio.\n- **No Scroll for Non-Scrollable Elements**: Automatically detects elements that can't scroll and won't try to sync them.\n- **Edge Case Handling**: Handles edge cases like scroll height and client height discrepancies gracefully.\n- **Lightweight \u0026 No Dependencies**: Small and efficient — zero dependencies.\n\n### Installation\n\n```bash\nnpm i scroll-concert\n```\n\nor\n\n```bash\nyarn add scroll-concert\n```\n\n### Usage\n\nAfter installation, simply include the library in your project and call `scrollConcert` to sync scroll positions between your elements.\n\n#### Basic Example\n\n```js\nimport scrollConcert from \"scroll-concert\";\n\n// Sync one leader with a follower\nscrollConcert({\n  leader: \"#leader\", // The selector for your leader element(s)\n  follower: [{ selector: \"#follower\" }], // The selector for your follower(s)\n});\n```\n\n#### Multiple Leaders\n\n```js\nscrollConcert({\n  leader: [\"#leader\", \"#secondLeader\"], // Multiple leaders\n  follower: [{ selector: \"#follower\" }], // One follower\n});\n```\n\n#### Custom Speed Ratio\n\nControl the speed of your followers with a `speedRatio`. For example, if you want your follower to scroll twice as fast as the leader:\n\n```js\nscrollConcert({\n  leader: \"#leader\",\n  follower: [\n    { selector: \"#followerA\", speedRatio: 2 }, // Follower scrolls twice as fast\n    { selector: \"#followerB\", speedRatio: 3 }, // Follower scrolls thrice as fast\n  ],\n});\n```\n\n#### Stopping the Sync\n\nscrollConcert returns a function you can call to top synchronization:\n\n```js\nconst stopTheMusic = scrollConcert({\n  leader: \"#leader\",\n  follower: [{ selector: \"#follower\" }],\n});\n\n// Later, when you want to stop the synchronization:\nstopTheMusic();\n```\n\n### Edge Case Handling\n\nScroll Concert automatically handles edge cases like when an element is not scrollable or when `scrollHeight` is equal to `clientHeight`. No unnecessary scrolling will occur, ensuring a smooth user experience.\n\n### API\n\n```ts\nexport type Leader = string | string[];\nexport type Follower = {\n  selector: string;\n  speedRatio?: number;\n};\n\nexport type ConcertParams = {\n  leader: Leader; // The leader element(s) (id, class, or selector)\n  follower: Follower | Follower[]; // The follower element(s)\n};\n\nfunction scrollConcert(params: ConcertParams): () =\u003e void; // Returns a stop function\n```\n\n### Why Use Scroll Concert?\n\n- **Simplicity**: With just a few lines of code, you can synchronize scrolling between multiple elements.\n- **Performance**: Optimized for performance with minimal impact on page load time.\n\n### Testing\n\nTo run the tests locally:\n\n1. Clone the repository.\n2. Install the dependencies:\n   ```bash\n   npm i\n   ```\n3. Run the tests:\n   ```bash\n   npm run test\n   ```\n   You can also test manually with the index.html provided in the project, which has a simple parallax implementation.\n\nScroll Concert uses [Vitest](https://vitest.dev/) for unit tests, to ensure the library works in various scenarios.\n\n### Contributing\n\nWe welcome contributions to make this library even better! Feel free to fork the repository, make changes, and submit pull requests.\n\n### License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fscroll-concert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphieros%2Fscroll-concert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fscroll-concert/lists"}