Skip to content

Commit 9be09c9

Browse files
committed
[scroll-animations-1] Define view() notation #7587
1 parent e561566 commit 9be09c9

File tree

1 file changed

+24
-2
lines changed

1 file changed

+24
-2
lines changed

scroll-animations-1/Overview.bs

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -355,8 +355,9 @@ spec: cssom-view-1; type: dfn;
355355
at the start edge of the [=scrollable overflow rectangle=],
356356
it might not be possible to scroll to < 32% progress.
357357

358-
[=View progress timelines=] can be referenced in 'animation-timeline' by name
359-
(see [[#timeline-scope]])
358+
[=View progress timelines=] can be referenced
359+
anonymously using the ''view()'' [=functional notation=]
360+
or by name (see [[#timeline-scope]])
360361
after declaring them using the 'view-timeline' properties
361362
on the view progress subject.
362363
In the Web Animations API,
@@ -417,6 +418,27 @@ spec: cssom-view-1; type: dfn;
417418

418419
## Anonymous View Progress Timelines ## {#view-timelines-anonymous}
419420

421+
### The ''view()'' notation ### {#view-notation}
422+
423+
The <dfn>view()</dfn> functional notation
424+
can be used as a value of 'animation-timeline'
425+
and specifies a [=view progress timeline=]
426+
in reference to the nearest ancestor [=scroll container=].
427+
Its syntax is
428+
429+
<pre class="prod">
430+
<<view()>> = view( [ <<axis>> || <<'view-timeline-inset'>> ]? )
431+
</pre>
432+
433+
By default,
434+
''view()'' references the [=block axis=];
435+
as for ''scroll()'',
436+
this can be changed by providing an explicit <<axis>> value.
437+
438+
The optional <<'view-timeline-inset'>> value provides an adjustment
439+
of the [=view progress visibility range=],
440+
as defined for 'view-timeline-inset'.
441+
420442
### The {{ViewTimeline}} Interface ### {#viewtimeline-interface}
421443

422444
<pre class="idl">

0 commit comments

Comments
 (0)