Re: [csswg-drafts] [css-animations-2][web-animations-2] (proposal) Add pointer driven animations (#10574)

(the promised comment from the meeting)

The thing with the timelines (scroll, view, and now pointer) is that they report the _progress_ value as a % within the defined range.

In the case of a pointer animation, if we will use this % for the element itself, or for something inside this element, we have some avenues to transform it into a coordinate for its background-position, or a nested element that will know the container's dimensions.

However, if we have an element outside, and when we lift this value via a timeline-scope, any animation applied there will be outside our target element’s context.

And we don’t have a convenient way to transform this progress value into the exact coordinates inside our timeline.

Example: if we’d want to have a tooltip that is initially positioned near a button, but then we want it to follow the cursor while the cursor is inside the button, we can’t use the button’s timeline.

Quick demo: https://codepen.io/kizu/pen/xxvGRKo (look in Chrome, as it uses scroll-driven animations and anchor positioning).

In this example, I am using an element as a substitute for a cursor, and a view timeline as a substitute for a pointer timeline (I think, in general, something like that could be useful to prototype pointer animations, as we will work on the similar terms).

While, theoretically, we could use `anchor()` with a percentage for an `inset-inline-start` there, it would be less performant than a `transform()`, and would still be rather cumbersome.

I do not know if there is a viable solution, but I would be happy if we could _somehow_ get not just the percentage value of some timeline, but the exact coordinate of it in its range. Getting this as a `<length>` would be useful for many cases.

(note that this is not an objection for a proposal — I really like it and it will help with many cases — but rather pointing at a certain number of use cases where we need precise coordinates; I did provide some of them in a comment to a related issue — https://github.com/w3c/csswg-drafts/issues/8639#issuecomment-1484056697)


-- 
GitHub Notification of comment by kizu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10574#issuecomment-2378219487 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 27 September 2024 01:17:40 UTC