- From: Yehonatan Daniv via GitHub <sysbot+gh@w3.org>
- Date: Thu, 18 May 2023 08:10:48 +0000
- To: public-css-archive@w3.org
ydaniv has just created a new issue for https://github.com/w3c/csswg-drafts: == [scroll-animations-1] Allow named ranges to be used with math functions == Currently the spec treats [`<timeline-range-name>`](https://drafts.csswg.org/scroll-animations-1/#typedef-timeline-range-name) as an `<ident>` and a named range is specified as [`<timeline-range-name> <length-percentage>`](https://drafts.csswg.org/scroll-animations-1/#propdef-animation-range-start). A range can also be simply a `<length-percentage>` without a name for use with ScrollTimelines, and [there's a suggestion](https://github.com/w3c/csswg-drafts/issues/8672#issuecomment-1545980510) for allowing the same for ViewTimelines, for attaching to the entire scroll range. However, there are some use-cases, which are currently not addressed, more specifically: clamping a scroll range at the edges of the scroll container, so the effect, for example, will always start at 0% progress or end at 100% progress, regardless of layout. Example could be an element that has the following animation: ```css @keyframes fadeIn { from { opacity: 0; } } .target { animation: fadeIn auto both view(); animation-range: entry; } ``` But when the page loads the target is already partially visible in the viewport. So it will present on load as semi-transparent. One way to address these could be but can be done if we could use named ranges inside math functions, so authors could write it as: ```css @keyframes fadeIn { from { opacity: 0; } } .target { animation: fadeIn auto both view(); animation-range: max(0%, entry 0%) entry 100%; } ``` So questions are: * can we make it possible? * does this require syntax changes? Or just spec changes to how these types interact? cc @fantasai @flackr @bramus Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8852 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 18 May 2023 08:10:50 UTC