Skip to content

Commit 7f0e68c

Browse files
committed
[scroll-animations-1] Define view() notation #7587
1 parent e4f2439 commit 7f0e68c

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
@@ -342,8 +342,9 @@ spec: cssom-view-1; type: dfn;
342342
at the start edge of the [=scrollable overflow rectangle=],
343343
it might not be possible to scroll to < 32% progress.
344344

345-
[=View progress timelines=] can be referenced in 'animation-timeline' by name
346-
(see [[#timeline-scope]])
345+
[=View progress timelines=] can be referenced
346+
anonymously using the ''view()'' [=functional notation=]
347+
or by name (see [[#timeline-scope]])
347348
after declaring them using the 'view-timeline' properties
348349
on the view progress subject.
349350
In the Web Animations API,
@@ -404,6 +405,27 @@ spec: cssom-view-1; type: dfn;
404405

405406
## Anonymous View Progress Timelines ## {#view-timelines-anonymous}
406407

408+
### The ''view()'' notation ### {#view-notation}
409+
410+
The <dfn>view()</dfn> functional notation
411+
can be used as a value of 'animation-timeline'
412+
and specifies a [=view progress timeline=]
413+
in reference to the nearest ancestor [=scroll container=].
414+
Its syntax is
415+
416+
<pre class="prod">
417+
<<view()>> = view( [ <<axis>> || <<'view-timeline-inset'>> ]? )
418+
</pre>
419+
420+
By default,
421+
''view()'' references the [=block axis=];
422+
as for ''scroll()'',
423+
this can be changed by providing an explicit <<axis>> value.
424+
425+
The optional <<'view-timeline-inset'>> value provides an adjustment
426+
of the [=view progress visibility range=],
427+
as defined for 'view-timeline-inset'.
428+
407429
### The {{ViewTimeline}} Interface ### {#viewtimeline-interface}
408430

409431
<pre class="idl">

0 commit comments

Comments
 (0)