{"_rev":"2-b8ca7aeb71b2f41a4e862309a7ad5f79","time":{"created":"2024-05-15T20:17:35.260Z","1.0.0":"2022-10-28T15:01:30.342Z","modified":"2024-05-15T20:17:35.822Z","1.1.0":"2024-05-15T20:17:35.498Z"},"_id":"scroll-timeline-polyfill","name":"scroll-timeline-polyfill","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"scroll-timeline-polyfill","version":"1.1.0","description":"A polyfill for scroll-driven animations on the web via ScrollTimeline","type":"module","scripts":{"build":"vite build","dev":"vite","deploy":"npm run build","test-setup":"node test/setup/checkout-wpt.mjs","test:wpt":"npm run test-setup && cd test && cd wpt && (python wpt run --headless -y --log-wptreport ../report/data.json --log-wptscreenshot=../report/screenshots.txt --log-html=../report/index.html --inject-script ../../dist/scroll-timeline.js firefox scroll-animations || true)","test:simple":"npm run test-setup && cd test && cd wpt && python wpt serve --inject-script ../../dist/scroll-timeline.js","test:compare":"node test/summarize-json.mjs test/report/data.json > test/report/summary.txt && echo 'Comparing test results. If different and expected, patch the following diff to test/expected.txt:' && diff test/expected.txt test/report/summary.txt"},"repository":{"type":"git","url":"git+https://github.com/flackr/scroll-timeline.git"},"keywords":["waapi","scrolltimeline","parallax","animations","web","animations"],"author":"","license":"Apache-2.0","bugs":{"url":"https://github.com/flackr/scroll-timeline/issues"},"homepage":"https://github.com/flackr/scroll-timeline#readme","devDependencies":{"terser":"^5.27.0","vite":"^5.0.12"},"gitHead":"b12de7813379379709602ac9bad2c100effe963e","_id":"scroll-timeline-polyfill@1.1.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-BpL3gk3Ynt/5VYaDFUNUP/FTkDldwKQnWcA07g/mDHkMVS9pQUyUXBpsy4RZYAgsfFeI1tWcnPNrEFtCpQoO9Q==","shasum":"e3efa6c7d2ae9559b3d7cdebfdb79a0cf5d3f536","tarball":"https://registry.npmjs.org/scroll-timeline-polyfill/-/scroll-timeline-polyfill-1.1.0.tgz","fileCount":15,"unpackedSize":602608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+08S+1tdhgELx7i822EnKyC033BJYJ+bbhqrm2rcrbwIhAKrWY5joeiPcrXQk4LDcb8Tg1jJNQm9Ye1p4kzUOrP2H"}]},"_npmUser":{"name":"google-wombot","email":"node-team-npm+wombot@google.com"},"directories":{},"maintainers":[{"name":"google-wombot","email":"node-team-npm+wombot@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/scroll-timeline-polyfill_1.1.0_1715804255260_0.7853650832160113"},"_hasShrinkwrap":false}},"maintainers":[{"name":"google-wombot","email":"node-team-npm+wombot@google.com"}],"description":"A polyfill for scroll-driven animations on the web via ScrollTimeline","homepage":"https://github.com/flackr/scroll-timeline#readme","keywords":["waapi","scrolltimeline","parallax","animations","web","animations"],"repository":{"type":"git","url":"git+https://github.com/flackr/scroll-timeline.git"},"bugs":{"url":"https://github.com/flackr/scroll-timeline/issues"},"license":"Apache-2.0","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<script src=\"https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js\"></script>\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\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 & 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=<secret> # Your saucelabs account username\nSAUCE_KEY=<secret> # Your API key\n```\n\n*Command*\n\n```shell script\nTEST_ENV=sauce npm run test:wpt\n```\n","readmeFilename":"README.md"}