[scroll-animations-1] Add view() as a value for animation-timeline as a corresponding of scroll()

[ydaniv]

Scroll-animations define the scroll() for defining an anonymous ScrollTimeline as a timeline for an animation.
The spec currently doesn't have a corresponding value for ViewTimeline.

Should we add view()?
I believe this is useful just as much.

If so, it should:

• take axis and inset as arguments
• refer to same element as the subject of that timeline

I guess these are reasonable for an anonymous ViewTimline, otherwise use a name.

[ydaniv]

@flackr your thoughts on this?

[ydaniv]

@fantasai asked for use-cases for this, I suppose the easiest (and very common one) is when an author simply wants an element to animate based on its own view progress inside its containing scrollport.
Very common for entry/exit animations.

So this:

.target {
  view-timeline: target-progress block;
  animation: 1s sparkle ease target-progress;
}

Becomes this:

.target {
  animation: 1s sparkle ease view();
}

Not a huge difference, but reduces the clutter in most common cases.

[css-meeting-bot]

The CSS Working Group just discussed Add view() to animation-timeline, and agreed to the following:

• RESOLVED: Accept fantasai's PR for adding view() function to animation-timeline

The full IRC log of that discussion

<TabAtkins> Topic: Add view() to animation-timeline
<TabAtkins> github: https://github.com//issues/7587
<fantasai> PR: https://github.com//pull/7988
<TabAtkins> flackr: so we defined scroll() for anonymous timelines, but htere was no convenient way to describe an anonymous view timeline
<TabAtkins> flackr: I believe elika already has a PR for this, so asking for resolution to use that
<fantasai> -> https://github.com//pull/7988/files
<bramus> +1 on resolving.
<TabAtkins> TabAtkins: I assume that anonymous view timelines work similar to anonymous scroll timelines? Just look in the tree for the nearest obvious thing?
<TabAtkins> fantasai: Yes, it looks up to the nearest scroll container
<TabAtkins> +1
<fantasai> ACTION fantasai: clarify that it applies to the element it's specified on
<TabAtkins> RESOLVED: Accept fantasai's PR for adding view() function to animation-timeline