https://github.com/flackr/scroll-timeline
A polyfill of ScrollTimeline.
https://github.com/flackr/scroll-timeline
Last synced: 8 months ago
JSON representation
A polyfill of ScrollTimeline.
- Host: GitHub
- URL: https://github.com/flackr/scroll-timeline
- Owner: flackr
- License: apache-2.0
- Created: 2019-08-30T19:51:11.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-26T15:21:30.000Z (over 1 year ago)
- Last Synced: 2025-04-03T22:05:43.499Z (9 months ago)
- Language: JavaScript
- Size: 64.8 MB
- Stars: 1,044
- Watchers: 17
- Forks: 103
- Open Issues: 80
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - scroll-timeline
README
# Scroll-timeline Polyfill
A polyfill of ScrollTimeline and ViewTimeline as defined by the [spec](https://drafts.csswg.org/scroll-animations-1/).
View a [cool demo showing its usage](https://flackr.github.io/scroll-timeline/demo/parallax/)!
# Usage
To use this polyfill, import the module into your site and you can start creating animations that use a `ScrollTimeline` or `ViewTimeline`.
```js
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`
```html
```
```css
@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 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/](https://developer.chrome.com/articles/scroll-driven-animations/) and [https://scroll-driven-animations.style/](https://scroll-driven-animations.style/)
# Contributing
### 1. Polyfill dev
Running a dev environment
```shell script
npm i
npm run dev
```
Then open the browser `http://localhost:3000`, choose one of the demos (test) to see how your changes.
### 2. Configure & Run Tests
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.
#### Run the tests locally
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:*
```dotenv
WPT_DIR=test/wpt #defaults to test/wpt
WPT_SERVER_PORT=8081 # choose any port available on your machine
```
*Command*
```shell script
npm run test:simple
```
Go to `localhost:8081/scroll-animations/current-time-nan.html` as an example.
#### Run the tests via Web Driver
##### Local web driver
*Required environment variables:*
```dotenv
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*
```shell script
npm run test:wpt
```
##### SauceLabs / CI
*Required environment variables:*
```dotenv
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*
```shell script
TEST_ENV=sauce npm run test:wpt
```