I put together a brief writeup about how I've been doing semantic zoom with just a little CSS. I feel like I haven't seen a lot of recent visual programming interfaces (although there are certainly a lot of prior art) take advantage of fluid zooming and geometric encapsulation. Here's a couple small demos:
I have been moaning about the under-utilization of zoom and visual nesting for a long time, and this is a really nice low overhead approach. Are there downsides? It feels like needing to recalculate for every element in the DOM, regardless of whether it is in the viewport, is going to slow things down when you get to a certain volume of elements, maybe?
I'd like to have a better grasp of where that threshold is, but I'm not sure at the moment. There's a good amount of low-hanging optimizations:
- What properties are being animated? Need to be careful about properties that cause large reflows like width/height/font-size. Properties like opacity, translate, scale, etc. should be consistently performant.
- If possible, applying contains properties to each element can really help browsers optimize rendering/layout. Some simple testing I've done shows that this could cut rendering time by 2-3x.
- I want to build primitive(s) that don't render offscreen elements. We may even be able to do it with just CSS using content-visibility.
- In the future, scroll-driven animations could potentially provide performance benefits since it's running off the main thread (I think browsers have a dedicated thread for scrolling) and zooming usually hijacks the
wheelevent. - It should be possible to hide (i.e.
display: none) elements that are too scaled out in the near future with CSSif()
It's going to require some care, but I'm (currently) optimistic this can scale pretty well.
Performance aside, I'm finding the ability to easily start prototyping these types of zoom interactions valuable in and of itself! For example, here is the CSS for the first demo, the zooming logic is about 10 lines of CSS:
This is really cool!
Can you share the code that updates the “—folk-scale” variable?
Thanks Daniel Garcia! It's a custom element defined here (still pretty WIP) github.com/folk-systems/folk-canvas/blob/main/labs/folk-pinch.ts
If you're looking for something already published (but a little outdated) check out github.com/GoogleChromeLabs/pinch-zoom
Also worth noting that a white boarding app like tldraw have --tl-zoom .
I've got a bit of a similar thing going on with my main project right now, laminarnotes.com, though I haven't really tried to make my zoom continuous (and it's also not a programming interface (yet)). I'll have to see if I can use any of your tricks.
Performance is definitely a problem. I have to virtualize any element that's not on the screen just to get it tolerable.
Andrew F super cool, next thing I want to figure out how to apply this to nested/recursive structures.