{"id":13630196,"url":"https://github.com/flackr/scroll-timeline","last_synced_at":"2025-05-15T00:10:40.314Z","repository":{"id":39600501,"uuid":"205447845","full_name":"flackr/scroll-timeline","owner":"flackr","description":"A polyfill of ScrollTimeline.","archived":false,"fork":false,"pushed_at":"2024-08-26T15:21:30.000Z","size":67984,"stargazers_count":1044,"open_issues_count":80,"forks_count":103,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-03T22:05:43.499Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flackr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2019-08-30T19:51:11.000Z","updated_at":"2025-03-30T15:46:45.000Z","dependencies_parsed_at":"2023-02-17T21:31:19.251Z","dependency_job_id":"d7398e7a-cb79-453c-9ae1-a709499a01ba","html_url":"https://github.com/flackr/scroll-timeline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flackr%2Fscroll-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flackr%2Fscroll-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flackr%2Fscroll-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flackr%2Fscroll-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flackr","download_url":"https://codeload.github.com/flackr/scroll-timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248368006,"owners_count":21092287,"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":[],"created_at":"2024-08-01T22:01:33.364Z","updated_at":"2025-04-11T09:29:21.969Z","avatar_url":"https://github.com/flackr.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Scroll-timeline Polyfill\n\nA polyfill of ScrollTimeline and ViewTimeline as defined by the [spec](https://drafts.csswg.org/scroll-animations-1/).\n\nView a [cool demo showing its usage](https://flackr.github.io/scroll-timeline/demo/parallax/)!\n\n# Usage\n\nTo use this polyfill, import the module into your site and you can start creating animations that use a `ScrollTimeline` or `ViewTimeline`.\n\n```js\nimport 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';\n\ndocument.getElementById('parallax').animate(\n    { transform: ['translateY(0)', 'translateY(100px)']},\n    { fill: 'both',\n      timeline: new ScrollTimeline({\n        source: document.documentElement,\n      }),\n      rangeStart: new CSSUnitValue(0, 'px'),\n      rangeEnd: new CSSUnitValue(200, 'px'),\n    });\n```\n\nAlso works with CSS Animations that use a `view-timeline` or `scroll-timeline`\n\n```html\n\u003cscript src=\"https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js\"\u003e\u003c/script\u003e\n```\n\n```css\n@keyframes parallax-effect {\n  to { transform: translateY(100px) }\n}\n#parallax {\n  animation: parallax-effect linear both;\n  animation-timeline: scroll(block root);\n  animation-range: 0px 200px;\n}\n```\n\nPlease ensure your CSS is hosted on the same domain as your website or included directly on the page within a \u003cstyle\u003e tag.\n\nIf you are loading stylesheets from other origins, the polyfill might not be able to fetch and apply them correctly, due to browser security restrictions.\n\nFor more details on and use-cases of scroll-driven animations, please refer to [https://developer.chrome.com/articles/scroll-driven-animations/](https://developer.chrome.com/articles/scroll-driven-animations/) and [https://scroll-driven-animations.style/](https://scroll-driven-animations.style/)\n\n# Contributing\n \n### 1. Polyfill dev \n\nRunning a dev environment\n\n```shell script\nnpm i\nnpm run dev \n```\n\nThen open the browser `http://localhost:3000`, choose one of the demos (test) to see how your changes. \n\n### 2. Configure \u0026 Run Tests\n\nTest configurations are available in: `test/tests.config.json` that file includes:\n\n1. polyfillFiles: an array of our JS shim / polyfill files, those will be injected in WPT tests files.\n2. harnessTests: an array of WPT harness tests we want to test the polyfill against.\n3. browsers.local: Browser our local selenium-webdriver will test against\n4. browsers.sauce: Browser our local selenium-webdriver will test against in Saucelabs / CI environment.   \n\n#### Run the tests locally\n\nSimple test will serve the WPT tests folder and intercepts requests, if the request path matches a harness test we are interested in polyfilling, it will inject the polyfill.\n\n*Required environment variables:*\n\n```dotenv\nWPT_DIR=test/wpt #defaults to test/wpt\nWPT_SERVER_PORT=8081 # choose any port available on your machine\n```\n\n*Command*\n\n```shell script\nnpm run test:simple\n```\n\nGo to `localhost:8081/scroll-animations/current-time-nan.html` as an example.\n\n#### Run the tests via Web Driver\n\n##### Local web driver\n\n*Required environment variables:*\n\n```dotenv\nWPT_DIR=test/wpt #defaults to test/wpt\nWPT_SERVER_PORT=8081 # choose any port available on your machine\nLOCAL_BROWSER=chrome # choose one of 'chrome', 'edge', 'firefox', 'safari'\nLOCAL_WEBDRIVER_BIN=? #/path/to/webdriver-binaries\n```\n\n*Command*\n\n```shell script\nnpm run test:wpt\n```\n\n##### SauceLabs / CI\n\n*Required environment variables:*\n\n```dotenv\nTEST_ENV=sauce\nWPT_DIR=test/wpt #defaults to test/wpt\nWPT_SERVER_PORT=8081 # choose any port available on your machine\nSC_TUNNEL_ID=sc-wpt-tunnel # please specify 'sc-wpt-tunnel' as a SauceConnect Proxy Tunnel ID\n\nSAUCE_NAME=\u003csecret\u003e # Your saucelabs account username\nSAUCE_KEY=\u003csecret\u003e # Your API key\n```\n\n*Command*\n\n```shell script\nTEST_ENV=sauce npm run test:wpt\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflackr%2Fscroll-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflackr%2Fscroll-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflackr%2Fscroll-timeline/lists"}