Remix.run Logo
erichocean 8 hours ago

If the author is around, can you do a short writeup on how this implemented? I've got my own immediate-mode UI framework and am curious how you did it.

SoufianeGfx 6 hours ago | parent | next [-]

The author here. You have various concepts but overall we store the start time and that's it :D the rest are details, clip, tween, easing function, anchor have surviving resizing, stagger to generate the same anim with variations. Or variations of clips, loop. Proper anim of colors in oklab, oklch, linear srgb, hsl, ... Anyway I cannot explain much it's really simple code with a userfriendly front-end.

erichocean 5 hours ago | parent [-]

Thanks, I had Claude walk me through the code if anyone is curious:

https://claude.ai/share/12357895-d585-4475-93fb-cdb5eba5dd76

tl;dr It's not an implicit animation framework like Core Animation or CSS animations. Instead, each frame you get the current value which is then used, and the actual tween curve only changes when you call a tween function with a new target; otherwise, you get the current (tweened) value since the last time the target changed (which might be the final value).

SoufianeGfx 5 hours ago | parent [-]

If Claude can implement my todo list: * Lazy eval (cost only at the first run) * Animation clipping (evaluate only the visible one) I'll accept the PR.

hilti 7 hours ago | parent | prev [-]

Not the author but it‘s implemented in only two files which can be studied on Github.