Something fun about tree-view



Just try this CSS in your stylesheet:

.tree-view-resizer {
    width: 200px;
    transition: width 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);

.tree-view-resizer:hover {
    width: 350px;

I like this useless feature :smile:


That’s pretty cool! I don’t like the part where it moves opposite of the direction you pull it for a fraction of a second … but that can be tweaked, I’m sure.


Like with my bezier-curve-editor package

:kissing_smiling_eyes: :notes:

Edit: I’m good for another update, it’s all broken :cry:


You can use something more linear if you want.

Just change it by:

.tree-view-resizer {
    width: 200px;
    transition: width 200ms linear;

Or ease-in / ease-out. It looks good too :wink:


I like it, ideally for me this would happen if there is some file which name is longer then the width of sidebar.


This can be done with a package. Maybe if I have some time I will create it.


Maybe If I have some time, I could help you with it :).
I will most likely have vacation in at end of the year and I am planning to spend it with Atom.


I tried this with a friend:

.tree-view-resizer {
    width: 200px !important;
    min-width: 200px !important;

.tree-view-resizer:hover {
    width: auto !important;

It works but we can’t animate it.


CSS transitions from and to auto values don’t work out of the box. For more information see here.


Yes you’re right. But without making a package, it works.


Nice! That’s pretty cool!