- From: Bramus! via GitHub <sysbot+gh@w3.org>
- Date: Fri, 24 Sep 2021 14:05:15 +0000
- To: public-css-archive@w3.org
Having tinkered with Scroll-Linked Animations quite a lot _(See [here](https://brm.us/scroll-linked-animations-pt1), [here](https://brm.us/scroll-linked-animations-pt2), [here](https://brm.us/scroll-linked-animations-pt3), [here](https://codepen.io/tag/scroll-timeline))_ I'd like to add some counterweight to the premise of this proposal: --- > The model seems to rely a lot on explicit offsets, rather than on element positions. Typically the reason for using offsets is to align with elements. I only found myself in need of explicit offsets is some typical yet always very simple situations: - Scroll for `100vh` (e.g. cover page) - Scroll from top to bottom of the entire document (e.g. progress bar) In all other cases I found myself grabbing to element-based offsets, as they're more dynamic. Additionally, when absolute offsets are needed they are mostly built using relative units _(instead of absolute units)_, which also keeps them somewhat dynamic. _(I know: the first linked to article uses them a lot but that's because of the structure of the two articles: only in the second article the concept of element-based offsets is introduced. If I were to rewrite some examples from the first article (such as the image gallery) I'd use element-based offsets for it, as such an implementation would adapt itself to the number of slides/images)_ --- > There is functionality to use element-based offsets, but these rely on ID selectors, which are not particularly portable across pages and makes it impossible for styles to be re-used in multiple places on the same page. To me, the root cause here is the fact that `selector()` only works with ID selectors. If it were to behave like `document.querySelector` it'd open up lots more possibilities. When also supporting `&` ([from CSS nesting](https://drafts.csswg.org/css-nesting/#nest-selector)) it'd even allow one to point to _“self”_, allowing re-use of created scroll-timelines. This shortcoming of `selector()` — which was [one of the first things that I documented about it](https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/#note--selector) — is being discussed in https://github.com/w3c/csswg-drafts/issues/5884 and by extension https://github.com/w3c/csswg-drafts/issues/5811 -- GitHub Notification of comment by bramus Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6674#issuecomment-926652680 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 24 September 2021 14:05:18 UTC