I always love seeing tricks like this from designers but then I never see anything this cool on the web otherwise. Where do all these great designers work and why don't I ever get to see the products they make?
Most of the time, I'm just trying to read text and get an answer. Everything that is not text, formatting or typography gets in the way.
The best techniques can be applied in subtle ways to improve the overall presentation, without resorting to flashy showcases.
For example, how would you redesign the Python docs to feel like a beautifully typeset book does?
Do you know about Edward Tufte? His work doesn't revolves specifically about software, but his principles show how to present technical information in the clearest way, and his books [3] are beautiful examples on how to put a technical topic in book form with clean and beautiful layouts.
[1] https://www.interaction-design.org/literature/topics/gestalt...
[2] https://medium.com/bigcommerce-developer-blog/design-for-dev...
Well, many of those animations like opacity changes and border animations undoubtedly force the browser to re-layout and repaint the entire screen anyway. So on an actual page you'll se stutters, frame drops and ungodly CPU usage.
The only animations that will (barely) work is the `transform: translate` ones as they usually preserve the layout, and can be composited on the GPU.
Depends on the rendering engine. With Blink opacity, filter, and transform will skip past layout and paint after the first render.
Chrome Dev Summit 2018: https://youtu.be/AB9qSUhlxh8?t=754
Thanks! Didn't realize opacity was mostly fixed. In my head it as still very problematic because I know that opacity changes are very frowned upon by device manufacturers (like smart TVs). The reasons are actually mentioned in the video:
- they "don't trigger layout and can often bypass paint" (so paint isn't always bypassed)
- "compositing is not free. If you are on resource constrained devices, you really need to watch your composited layer count"
The vast majority of devices in the world out there are resource constrained: cheap smartphones are ubiquitous. But then there's also things like smart TVs etc. Hence my reaction to opacity changes :)