Re: [csswg-drafts] [css-anchor-position][css-position] Fixing the animation problem (#9598)

The CSS Working Group just discussed `[css-anchor-position][css-position] Fixing the animation problem`.

<details><summary>The full IRC log of that discussion</summary>
&lt;fantasai> Tab is going to intro the issue for people to think about<br>
&lt;fantasai> -> https://github.com/w3c/csswg-drafts/issues/9598#issuecomment-1836854109<br>
&lt;fantasai> -> https://github.com/w3c/csswg-drafts/issues/9598#issuecomment-1817244328<br>
&lt;fantasai> TabAtkins: Suppose a very simple example: animating from `inset-area: top` to `inset-area: bottom`.<br>
&lt;fantasai> TabAtkins: These containing blocks aren't numbers, they're names. So can't transition them.<br>
&lt;fantasai> TabAtkins: It also defaults the alignment to different values<br>
&lt;fantasai> TabAtkins: can't transition from align-self end (first case) to align-self: start (second case)<br>
&lt;fantasai> TabAtkins: Can't animate between those<br>
&lt;fantasai> TabAtkins: If your positions can be described by top/left/bottom/right (and the same combination of such properties) in both first and last frames, you can animate smoothly<br>
&lt;fantasai> TabAtkins: but otherwise can't<br>
&lt;fantasai> TabAtkins: We're proposing to solve this by introducing a new property<br>
&lt;fantasai> TabAtkins: position-animation: normal | magic<br>
&lt;dbaron> TabAtkins: "magic" is not the final name<br>
&lt;fantasai> TabAtkins: magic computes to a rectangle. This rectangle is never exposed to authors, always serializes as "magic"<br>
&lt;fantasai> TabAtkins: but it has x/y offsets and width/height<br>
&lt;fantasai> TabAtkins: when position-animation is magic on both sides of a transition, this overrides all the rest of the abspos positioning properties (insets, alignment, etc)<br>
&lt;fantasai> TabAtkins: we can smoothly interpolate the rect, so you get proper animation<br>
&lt;fantasai> TabAtkins: We don't expose the rect to authors because this would bypass the rest of the cascade -- it needs to win over all the other properties to work<br>
&lt;florian> q?<br>
&lt;florian> q+<br>
&lt;fantasai> TabAtkins: modulo style interleaving issue, which need to discuss, we think this would solve all the animation issues for positioning<br>
&lt;khush> q+<br>
&lt;dbaron> position-animation: properties | coordinates<br>
&lt;fantasai> TabAtkins: it also fixes, e.g. if you change which element resolves against your --foo anchor name<br>
&lt;emilio> q+<br>
&lt;fantasai> fantasai: So you'd write `transition: position-animation 2s`<br>
&lt;fantasai> TabAtkins: assuming you set `magic` for both starting and ending points<br>
&lt;fantasai> TabAtkins: our implementers think something similar to this is going to work<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9598#issuecomment-1942930696 using your GitHub account


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

Received on Wednesday, 14 February 2024 01:05:22 UTC