{"id":42514019,"url":"https://github.com/weareferal/scrollxp","last_synced_at":"2026-01-28T14:31:01.516Z","repository":{"id":39030232,"uuid":"220524751","full_name":"weareferal/scrollxp","owner":"weareferal","description":"Alpine.js-esque library for scrolling animations on websites","archived":false,"fork":false,"pushed_at":"2023-03-15T05:18:22.000Z","size":5345,"stargazers_count":79,"open_issues_count":11,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-26T03:12:31.612Z","etag":null,"topics":["animation","animation-library","animations","gsap","parallax","scene","scrolling-animations","scrollmagic"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/weareferal.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":"2019-11-08T18:23:47.000Z","updated_at":"2025-09-22T05:30:17.000Z","dependencies_parsed_at":"2023-02-01T02:45:28.753Z","dependency_job_id":null,"html_url":"https://github.com/weareferal/scrollxp","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/weareferal/scrollxp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weareferal%2Fscrollxp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weareferal%2Fscrollxp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weareferal%2Fscrollxp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weareferal%2Fscrollxp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weareferal","download_url":"https://codeload.github.com/weareferal/scrollxp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weareferal%2Fscrollxp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28846058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T13:02:32.985Z","status":"ssl_error","status_checked_at":"2026-01-28T13:02:04.945Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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","animation-library","animations","gsap","parallax","scene","scrolling-animations","scrollmagic"],"created_at":"2026-01-28T14:31:01.452Z","updated_at":"2026-01-28T14:31:01.507Z","avatar_url":"https://github.com/weareferal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ScrollXP\n\n_ScrollXP_ is a library that makes it easy to drop scroll-related animations into \nyour website using HTML data attributes. It's a bit like Alpine.js or Tailwind.css \n... but for animations.\n\n\u003cimg src=\"https://res.cloudinary.com/djst7cf98/image/upload/v1607394295/scroll-animations.gif\" width=\"100%\"\u003e\n\n## Overview\n\nCreating animations can be tedious. It's not always clear where the code should go \nand there are a number of common animations you'll likely write over and over again.\nIf you're not careful you JavaScript files can end up a mess. ScrollXP helps you \navoid this by exposing a set of data attributes that you can drop directly into \nyour HTML, making common animations quick and easy.\n\n## Demos\n\nSee some simple examples in action:\n\n- [Fade In Down Animation](https://codepen.io/weareferal/full/eYdNNzq)\n- [Piano Key Animation](https://codepen.io/weareferal/full/WNGvvpY)\n- [Parallax Animation](https://codepen.io/weareferal/full/abmOOwd)\n- [Full Example](https://weareferal.github.io/scrollxp/)\n\n## Installation\n\nVia **NPM**:\n\n```\n$ npm install gsap scrollxp --save\n```\n\n\u003e **Note**: You need to use GSAP 3 or greater.\n\nInclude it in your script:\n\n```js\nimport ScrollXP from \"scrollxp\"\n```\n\nOr via **CDN**:\n\n```html\n\u003cscript src=\"https://unpkg.com/gsap/dist/gsap.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/scrollxp/dist/scrollxp.min.js\"\u003e\u003c/script\u003e\n```\n\n## Quick Start\n\n```js\nnew ScrollXP({\n  container: document.body,\n})\n```\n\nScrollXP uses [GSAP (GreenSock)](https://github.com/greensock/GSAP) and \n[ScrollMagic](https://github.com/janpaepke/ScrollMagic) under-the-hood.\n\nScrollXP relies on the concept of \"scenes\" from ScrollMagic. A scene is a \nsection of page that will act as a container or scope for particular animations.\nYou define these scenes by adding the `data-scene` attribute to elements. You \nthen add the animations you want to perform within the scene.\n\nCheck the documentation about how to create [scenes](https://github.com/weareferal/scrollxp/blob/master/docs/scene/README.md), [animations](https://github.com/weareferal/scrollxp/blob/master/docs/animation/README.md) and [parallax effect](https://github.com/weareferal/scrollxp/blob/master/docs/parallax/README.md).\n\n### Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://unpkg.com/gsap/dist/gsap.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/scrollxp/dist/scrollxp.min.js\"\u003e\u003c/script\u003e\n    \u003cstyle\u003e\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      body {\n        display: flex;\n        align-items: center;\n        height: 200vh;\n      }\n\n      section {\n        width: 100%;\n        height: 100vh;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      section\u003ediv {\n        width: 300px;\n        height: 300px;\n        border: 10px solid #000;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003csection data-scene data-scene-duration=\"100%\" data-scene-indicator=\"scene\"\u003e\n      \u003cdiv data-animate data-animate-to-rotation=\"360\"\u003e\u003c/div\u003e\n    \u003c/section\u003e\n    \u003cscript\u003e\n      new ScrollXP({\n        container: document.body,\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Usage\n\nCheck out our documentation for more detailed configuration and usage:\n\n- [Configuration](https://github.com/weareferal/scrollxp/blob/master/docs/configuration.md)\n  - [Debug](https://github.com/weareferal/scrollxp/blob/master/docs/configuration.md#debug)\n  - [Breakpoints](https://github.com/weareferal/scrollxp/blob/master/docs/configuration.md#breakpoints)\n  - [Scroll To Anchors](https://github.com/weareferal/scrollxp/blob/master/docs/configuration.md#scroll-to-anchors)\n  - [Smooth Scrolling](https://github.com/weareferal/scrollxp/blob/master/docs/configuration.md#smooth-scrolling)\n- [Scene](https://github.com/weareferal/scrollxp/blob/master/docs/scene/README.md)\n- [Animation](https://github.com/weareferal/scrollxp/blob/master/docs/animation/README.md)\n- [Parallax](https://github.com/weareferal/scrollxp/blob/master/docs/parallax/README.md)\n- [Development](https://github.com/weareferal/scrollxp/blob/master/docs/development.md)\n\n## Questions?\n\nFile a [GitHub issue](https://github.com/weareferal/scrollxp/issues/new) please.\n\n## Author\n\n[Feral](https://weareferal.com/)\n\n## License\n\n_ScrollXP_ is available under the MIT license. See the [LICENSE](https://github.com/weareferal/scrollxp/blob/master/LICENSE) file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweareferal%2Fscrollxp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweareferal%2Fscrollxp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweareferal%2Fscrollxp/lists"}