Sidebar

This page is the demo for an article I wrote comparing performance of different sidebar animations.

Links

here are the different sidebar animations I created

SVG demos

Along the way I created SVG demos to illustrate how the sidebars were different.

Initial sidebar

position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 160px;

display: flex;

Notion's sidebar

position: absolute;
width: 160px;

Linear's sidebar

position: fixed;
width: 160px;

Gitlab's sidebar

position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 160px;