Smooth tabs animations

[martpie]

Hey guys,

I miss smooth animations (like Chrome/Sublime...) for closing/moving tabs.

I didn't take a serious look at atom/tabs and how animations could work (if it even can ?), but I think I can handle that.

[simurai]

I think it could, but the implementation would need some changes. Currently it uses flexbox. It can be animated, but I think performance is not that great. Another issue is that when closing a tab, the tab gets removed immediately from the DOM. To have it animated, the removing would need to be delayed.

What might work:

• Instead of using flexbox to do all the positioning, change to position: absolute;. And then calculate the positions yourself and use transforms for it. When hardware accelerated, transforms should be pretty smooth.
• When positions change, transform tabs to new position.
• When adding/removing and the tabs need to be resized, not just moved, do the resizing without animation but then animate to the new positions and it might still look smooth.

Related: Animating the tree-view https://github.com/atom/tree-view/issues/358

[martpie]

Thanks for these advices @simurai, I'll be working on that tonight.

[simurai]

Good to hear.

Something else that came to mind. It might be tricky with all the different themes that can have different styling. Or if you change the width of the tabs in styles.less, the positioning would need to get updated too. Not sure if there is a good way to detect changes like that. I guess that's the nice thing about flexbox that it's all automatic.

[alexandernst]

Any news on this one?

[martpie]

Not really from my side, I'm a bit busy these times, I will try to have a look anyway