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] consider [css-scoping] / @scope + select() for referencing scroller #8028

Open
Schepp opened this issue Nov 6, 2022 · 1 comment

Comments

@Schepp
Copy link

Schepp commented Nov 6, 2022

With more and more CSS features relying on somehow "tagging" elements for later reference, like in Scroll-linked Animations, and each time introducing new tagging vocabulary and mechanisms of their own, I wonder if it would make more sense to build upon @mirisuzanne's idea of css-scoping / issue #5809 / CSS Scoping and combine that with the previously used select() function?

So instead of writing this:

.scroll-container {
  scroll-timeline-name: foo;
}

.animated-sibling-or-child-of-scroll-container {
  animation-timeline: foo;
}

we could have this:

@scope(.ancestor-of-both) {
  .animated-sibling-or-child-of-scroll-container {
    animation-timeline: scroll(select(:scope .scroll-container));
  }
}

Drawback of this would be that another not even started idea/spec would block the finalization of this one (and potential others). A solution could be to release Scroll-linked Animations the way it is currently planned and to upgrade it later to also support a CSS Scoping aware select() function for referencing the scroll container.

@Schepp Schepp changed the title [scroll-animations-1] consider [css-scoping] / @scope for referencing scroller [scroll-animations-1] consider [css-scoping] / @scope + select() for referencing scroller Nov 7, 2022
@Schepp Schepp changed the title [scroll-animations-1] consider [css-scoping] / @scope + select() for referencing scroller [scroll-animations-1] consider [css-scoping] / @scope + select() for referencing scroller Nov 7, 2022
@fantasai fantasai added the scroll-animations-1 Current Work label Nov 16, 2022
@fantasai
Copy link
Collaborator

See #7759 I think that handles what you're asking for?

@flackr flackr moved this from Needs triage to Low priority in Scroll linked animations [scroll-animations] Mar 10, 2023
@flackr flackr moved this from Low priority to Non-blocking in Scroll linked animations [scroll-animations] Apr 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

2 participants