3 ms·

At OrgPad, we apply a similar approach to all animations in the 2D canvas. You can try it out even on our home page which is actually done as an interactive Org

At OrgPad, we apply a similar approach to all animations in the 2D canvas. You can try it out even on our home page which is actually done as an interactive OrgPage: https://orgpad.com https://orgpad.com. The motion is much more natural and smooth, as if things had a bit of mass/ momentum. We have an internal debugger that can be enabled using a keyboard shortcut to configure the anim framework live. There you can play with many things including the overall speed of animations, spring stiffness, damping and more. This proved to be useful in recording buttery smooth presentations in 4K@120 Hz - with slow animations, there is just more time to render. :-D

vladvasiliu 3y ago
> The motion is much more natural and smooth, as if things had a bit of mass/ momentum. While I agree the motion itself feels fairly natural, there is a lag when you first start to move things around, which feels very weird. Once things start moving, they move as I expect them to, but only after a delay. This is on Firefox 113.0.2 on Linux/X11 on a 4k@60Hz screen.
- kaliszad 3y ago
  Thank you for the feedback. Unfortunately, Firefox (my daily driver for all things but OrgPad) is even slower than Chrome/ium for rendering. We, or mainly my colleague, will at some point rewrite most of the rendering into WebGL which should speed things up greatly. On the way there, we might rewrite even more stuff to canvas rendering but there are diminishing returns especially because font drawing in canvas is rather slow - we have to do a lot of caching which makes memory consumption a problem. Btw. you can probably confirm most of this using the browser profiler - you should see that OrgPad code usually occupies a fraction of the ~16 ms needed for smooth 60 Hz rendering. The rest is usually compositing on the GPU, something we can only affect by doing even more rendering on our own. How sad, in 2023 we are not able to draw a few hundred divs on a screen with absolute position without lag.
solarkraft 3y ago
It drops a few frames on my iPhone Xs. Even then it feels very responsive; I can be confident that it'll respond to my next touch right away. That makes it much better than most UIs I know, well done! Especially the expand/contract animations feel great.
- kaliszad 3y ago
  Thank you for the feedback. iOS is unfortunately a tough platform to do web development for. There is something really bad going on in terms of memory consumption when rendering HTML/CSS - we had to convert a lot of the rendering to canvas to mitigate. In any case, sometimes the browser will exhaust more memory than some rather low limit and kill the page. The limit is different depending on what else is going on in iOS too. There is to the best of our knowledge no effort to notify the running web application using some kind of event so we cannot react programmatically to such situation (e.g. by switching to lower resolution rendering).

vladvasiliu 3y ago

> The motion is much more natural and smooth, as if things had a bit of mass/ momentum. While I agree the motion itself feels fairly natural, there is a lag when you first start to move things around, which feels very weird. Once things start moving, they move as I expect them to, but only after a delay. This is on Firefox 113.0.2 on Linux/X11 on a 4k@60Hz screen.

kaliszad 3y ago
Thank you for the feedback. Unfortunately, Firefox (my daily driver for all things but OrgPad) is even slower than Chrome/ium for rendering. We, or mainly my colleague, will at some point rewrite most of the rendering into WebGL which should speed things up greatly. On the way there, we might rewrite even more stuff to canvas rendering but there are diminishing returns especially because font drawing in canvas is rather slow - we have to do a lot of caching which makes memory consumption a problem. Btw. you can probably confirm most of this using the browser profiler - you should see that OrgPad code usually occupies a fraction of the ~16 ms needed for smooth 60 Hz rendering. The rest is usually compositing on the GPU, something we can only affect by doing even more rendering on our own. How sad, in 2023 we are not able to draw a few hundred divs on a screen with absolute position without lag.

solarkraft 3y ago

It drops a few frames on my iPhone Xs. Even then it feels very responsive; I can be confident that it'll respond to my next touch right away. That makes it much better than most UIs I know, well done! Especially the expand/contract animations feel great.

kaliszad 3y ago
Thank you for the feedback. iOS is unfortunately a tough platform to do web development for. There is something really bad going on in terms of memory consumption when rendering HTML/CSS - we had to convert a lot of the rendering to canvas to mitigate. In any case, sometimes the browser will exhaust more memory than some rather low limit and kill the page. The limit is different depending on what else is going on in iOS too. There is to the best of our knowledge no effort to notify the running web application using some kind of event so we cannot react programmatically to such situation (e.g. by switching to lower resolution rendering).