Folder Expand/Collapse Animations

[SebastianSzturo]

It would be nice to have a expand/collapse animation on folders and projects to feel more native.

Any thoughts on that?

[lee-dohm]

You should be able to do this yourself with CSS, I think. @simurai, any pointers?

[simurai]

@SebastianSzturo I played around a bit by adding animations. You can try it in your styles.less file:

.tree-view {
  .entry.expanded > .entries {
    -webkit-animation: tree-view-expanded .4s cubic-bezier(.15,.7,.3, 1);
  }
  @-webkit-keyframes tree-view-expanded {
      0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

But it's not that great and has some flaws:

1. When collapsing all the DOM elements get removed immediately, so there can't be any animation on them, only when expanding.
2. When expanding the elements below get pushed down without animation. Might be possible with min-height, but would be pretty hackish.
3. It also animates on initial load.

So to do it really well, some more effort would be needed. Maybe calculate all positions with JS and inline the CSS? Then expanding/collapsing can be more dynamic. But it should only be considered if performance will be smooth.

[SebastianSzturo]

@simurai Thank for looking into it!
Seams like a more native implementation would come with more effort than I thought and maybe with some performance downsides. I am a big fan of your work at the new atom one templates. Do you think animations like that are generally a good idea?

[simurai]

Do you think animations like that are generally a good idea?

Yeah, I think it would improve UX because you see where things come from and go back again. So it would help orientation. Also animating the tree-view or find&replace panels would be nice. But because they all change width/height, performance wouldn't look that smooth. So not sure. Maybe no animation is still better than choppy animation?

Adding animations on smaller things and if possible only use opacity and transform should be no problem though.

[abejfehr]

I've been trying to play around with this and I've been animating the expand/collapse by using CSS transitions on the max-height of the entries. But by default, a .collapsed entry is set to display: none; and I'd like to change it but I can't find where that's defined. Are those styles defined somewhere in the atom core?

[simurai]

@abejfehr The selector is:

.list-tree.has-collapsable-children .list-nested-item.collapsed > .list-tree {
  display: none;
}

So you might can try to override that.

[avegancafe]

Is anyone working on this? It'd be really nice to see in the future-- currently since there are no animations it's kind of unpleasant to use the file tree. Would definitely go a long way in making Atom nicer