A polyfill of ScrollTimeline and ViewTimeline as defined by the spec.

View a cool demo showing its usage!

To use this polyfill, import the module into your site and you can start creating animations that use a ScrollTimeline or ViewTimeline.

import 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js'; document.getElementById('parallax').animate( { transform: ['translateY(0)', 'translateY(100px)']}, { fill: 'both', timeline: new ScrollTimeline({ source: document.documentElement, }), rangeStart: new CSSUnitValue(0, 'px'), rangeEnd: new CSSUnitValue(200, 'px'), });

Also works with CSS Animations that use a view-timeline or scroll-timeline

<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>

@keyframes parallax-effect { to { transform: translateY(100px) } } #parallax { animation: parallax-effect linear both; animation-timeline: scroll(block root); animation-range: 0px 200px; }

Please ensure your CSS is hosted on the same domain as your website or included directly on the page within a <style> tag.

If you are loading stylesheets from other origins, the polyfill might not be able to fetch and apply them correctly, due to browser security restrictions.

For more details on and use-cases of scroll-driven animations, please refer to https://developer.chrome.com/articles/scroll-driven-animations/ and https://scroll-driven-animations.style/

Running a dev environment

npm i npm run dev 

Then open the browser http://localhost:3000, choose one of the demos (test) to see how your changes.

Test configurations are available in: test/tests.config.json that file includes:

1. polyfillFiles: an array of our JS shim / polyfill files, those will be injected in WPT tests files.
2. harnessTests: an array of WPT harness tests we want to test the polyfill against.
3. browsers.local: Browser our local selenium-webdriver will test against
4. browsers.sauce: Browser our local selenium-webdriver will test against in Saucelabs / CI environment.

Simple 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.

Required environment variables:

WPT_DIR=test/wpt #defaults to test/wpt WPT_SERVER_PORT=8081 # choose any port available on your machine

Command

npm run test:simple

Go to localhost:8081/scroll-animations/current-time-nan.html as an example.

Required environment variables:

WPT_DIR=test/wpt #defaults to test/wpt WPT_SERVER_PORT=8081 # choose any port available on your machine LOCAL_BROWSER=chrome # choose one of 'chrome', 'edge', 'firefox', 'safari' LOCAL_WEBDRIVER_BIN=? #/path/to/webdriver-binaries

Command

npm run test:wpt

Required environment variables:

TEST_ENV=sauce WPT_DIR=test/wpt #defaults to test/wpt WPT_SERVER_PORT=8081 # choose any port available on your machine SC_TUNNEL_ID=sc-wpt-tunnel # please specify 'sc-wpt-tunnel' as a SauceConnect Proxy Tunnel ID SAUCE_NAME=<secret> # Your saucelabs account username SAUCE_KEY=<secret> # Your API key

Command

TEST_ENV=sauce npm run test:wpt