Skip to content

[css-anchor-position-1][css-animations-2][scroll-animations-1] Fix name visibility for descendants #13364

@flackr

Description

@flackr

In #12581 (comment) we resolved to use the same name scoping mechanism for the various specs that have scoped names: timeline-scope, anchor-scope, and trigger-scope. I still think this is a good thing to do so that developers don't have to navigate nuanced differences between name scoping.

Proposal:
Make position-anchor, animation-timeline, animation-trigger refer to the nearest ancestor declaring that name if found before reaching the *-scope element.

I think this is one aspect of timeline scopes that we should adopt for anchor scopes and trigger scopes. It is confusing for developers to have to add an explicit scope when referring to an ancestor. E.g.

<style>
.item {
  view-timeline-name: --item;
}
.animation-target {
  animation-name: parallax;
  animation-timeline: --item;
}
</style>
<div class=item>
  <div class=animation-target></div>
</div>
<div class=item>
  <div class=animation-target></div>
</div>
<div class=item>
  <div class=animation-target></div>
</div>

This will significantly de-risk the potential compat issues of updating timeline-scope as well as make anchor-scope and trigger-scope easier to use. E.g. here's a demo where the anchor intends to use the nearest position-anchor but right now requires developers explicitly add anchor-scope: https://codepen.io/flackr/pen/azZJvyL

@andruud FYI

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Wednesday morning

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions