Post

wonder what happened to the quality here

Which browser?

Firefox 139

You are a national treasure.

aww thanks! Does this mean I get to go on Celebrity Traitors, or at least the Off Menu podcast?

What if... it wasn't a mistake? 😅 If it animated like that on purpose? IME these types of non-straightforward transitions generate more "delight" - even though it's wrong!

Great read, thanks! I *think* I might be running into a similar issue, but I am using separate scale/translate props. To complicate the setup a bit further, they depend on typed custom CSS props and *these* are animated. The last demo of "Part 3" in ondras.github.io/rl-display/m...

...and after re-reading your article one more time, I think I found the culprit: my `translate` property depends on both (animated) custom properties: `--pan-x` and `--scale`. Hence the non-linearity :-(

Does the same apply when you declare each transform as its own CSS property instead of mashed together into one transform?

My first thought was why do that and not a simple scale + transform-origin? Am I missing something?

Bringing the tapped subject into the centre & zooming in means the transform-origin is different to the tapped area. E.g. the case in the article, the transform-origin isn't within the cat's head. You could work it out I guess, but that maths seems harder.

Also, if you wanted to handle an additional zoom to another position, I guess you'd need to animate the transform-origin? I haven't tried it, but I wonder if that would also produce a non-linear animation.

You forgot to close off with “Thank you for watching this episode of HTTP 203” 😉