Skip to content

Document lite version and npm #274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
egirard wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Document lite version and npm #274

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 48 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,27 @@ A polyfill of ScrollTimeline and ViewTimeline as defined by the [spec](https://d

View a [cool demo showing its usage](https://flackr.github.io/scroll-timeline/demo/parallax/)!

# News

Recent updates:
* npm is now supported: use npm install scroll-timeline-polyfill
* scroll-timeline-lite.js provides a lighter-weight version of the polyfill,
supporting only the javascript portions of the API. Use this if you want to
reduce overhead (bytes transmitted and runtime)

# Usage

To use this polyfill, import the module into your site and you can start creating animations that use a `ScrollTimeline` or `ViewTimeline`.
To use this polyfill directly, simply import the module into your site's js, or
include it from your html. In either case you can use the lite version,
`scroll-timeline-lite`, if you only need the javascript portion of the API
(`ScrollTimeline` and/or `ViewTimeline` objects), or you can include the full version, `scroll-timeline`

Note that this example is using the lite version which only supports the javascript
porion of the API. Then you can reference the API (using `ScrollTimeline` or
`ViewTimeline`).

```js
import 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';
import 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline-lite.js';

document.getElementById('parallax').animate(
{ transform: ['translateY(0)', 'translateY(100px)']},
Expand All @@ -22,7 +37,8 @@ document.getElementById('parallax').animate(
});
```

Also works with CSS Animations that use a `view-timeline` or `scroll-timeline`
The full polyfill adds support for CSS Animations that use a `view-timeline`
or `scroll-timeline` in CSS.

```html
<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
Expand All @@ -39,10 +55,38 @@ Also works with CSS Animations that use a `view-timeline` or `scroll-timeline`
}
```

Please ensure your CSS is hosted on the same domain as your website or included directly on the page within a <style> tag.
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.

See [issue #248](https://github.com/flackr/scroll-timeline/issues/248)

# npm usage

You can also include this package using npm:

```shell script
npm install scroll-timeline-polyfill
```

Then you can import directly into your javascript

```js
import 'scroll-timeline-polyfill/dist/scroll-timeline-lite.js';
```
OR
```js
import 'scroll-timeline-polyfill/dist/scroll-timeline.js';
```

OR include it in your html

```html
<script src="../../dist/scroll-timeline.js"></script>
```

# Use Cases

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
Expand Down