Skip to content
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.

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

[scroll-animations-1] Add examples #11421

Open
wants to merge 32 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
ab661ab
[scroll-animations-1] Add examples (WIP)
bramus Dec 30, 2024
cd6b3a9
[scroll-animations-1] Add scroll() examples
bramus Dec 30, 2024
247ac1f
[scroll-animations-1] Add ScrollTimeline examples
bramus Dec 30, 2024
bd6c1a2
[scroll-animations-1] Add scroll-timeline-* examples
bramus Dec 30, 2024
daf2409
[scroll-animations-1] Add view() example
bramus Dec 30, 2024
5c6dd88
[scroll-animations-1] Add ViewTimeline example
bramus Dec 30, 2024
0ebcf9a
[scroll-animations-1] Add view-timeline-* example
bramus Dec 30, 2024
35e74ca
[scroll-animations-1] Add animation-range examples
bramus Dec 30, 2024
bcfa235
[scroll-animations-1] Add @keyframes example
bramus Dec 30, 2024
f066f8e
[scroll-animations-1] Add animation-range example that uses calc()
bramus Dec 30, 2024
118da63
Update scroll-animations-1/Overview.bs
bramus Jan 8, 2025
b6e993c
Update scroll-animations-1/Overview.bs
bramus Jan 8, 2025
ecc8ca1
Update scroll-animations-1/Overview.bs
bramus Jan 8, 2025
ed84192
Update scroll-animations-1/Overview.bs
bramus Jan 8, 2025
5a3b4ea
[scroll-animations-1] Rework example use non-layout/scrolloffset affe…
bramus Jan 20, 2025
975b3dc
[scroll-animations-1] Add clarification to scroll() example
bramus Jan 20, 2025
23c716a
[scroll-animations-1] Add clarification about view() creating unique …
bramus Jan 20, 2025
bcb41e4
[scroll-animations-1] Move animation-range examples to the relevant s…
bramus Jan 20, 2025
dd36820
Merge branch 'main' into scroll-animations-1-examples
bramus Jan 20, 2025
75053f9
Merge branch 'main' into scroll-animations-1-examples
bramus Jan 31, 2025
85b1bc7
Update scroll-animations-1/Overview.bs
bramus Jan 31, 2025
db88e24
Update scroll-animations-1/Overview.bs
bramus Jan 31, 2025
5690e1d
Fix selector in example
bramus Feb 7, 2025
cbeeaf6
Make example keyframes more explicit
bramus Feb 7, 2025
3aa5d01
Clarify the visual outcome of certain examples
bramus Feb 7, 2025
2068909
Merge branch 'main' into scroll-animations-1-examples
bramus Feb 7, 2025
0ef3422
Add more descriptions
bramus Feb 8, 2025
0a4cbaa
Add more descriptions
bramus Feb 12, 2025
7c414ce
Timeline names are <dashed-ident>s
bramus Feb 12, 2025
7b8321f
More <dashed-ident> rename
bramus Feb 12, 2025
5a98c89
Merge branch 'main' into scroll-animations-1-examples
bramus Feb 12, 2025
ad1ac77
More detailed explanation for named scroll-timeline example
bramus Feb 12, 2025
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
Prev Previous commit
Next Next commit
[scroll-animations-1] Add ScrollTimeline examples
bramus committed Dec 30, 2024
commit 247ac1f6fa45b6f292a38da3a52a69cd7ddcba53
39 changes: 37 additions & 2 deletions scroll-animations-1/Overview.bs
Original file line number Diff line number Diff line change
@@ -423,10 +423,45 @@ spec:selectors-4; type:dfn; text:selector
are both computed when either is requested or updated.

<div class=example>
Example with {{ScrollTimeline}}
In the following example, {{ScrollTimeline}} instance that tracks
the document viewport in the block direction is created:

```js
// TODO
const myTimeline = new ScrollTimeline({
source: document.documentElement,
});
```

The created {{ScrollTimeline}} instance can be used
to animate an element as follows:

```js
const progressbar = document.querySelector('#progress');

progressbar.animate(
{
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
fill: 'forwards',
timeline: myTimeline,
}
);
```
</div>

<div class=example>
In this example, the `.scroller` element is the element
whose scroll position drives the progress of the timeline.
The timeline is set to track the scroll offset in the inline direction.

```js
const scroller = document.querySelector('.scroller');

const myTimeline = new ScrollTimeline({
source: scroller,
axis: 'inline',
});
```
</div>