Suggestion: Slide instead of Jerk

[benyanke]

I'm not a frontend guy, so perhaps this is more resource intensive or difficult than I'm thinking, but everything kind of 'jerks' when one switches panes currently. I would suggest have an option to slide, to make it a bit smoother.

[timomeh]

Thank you for your suggestion! You're right, an animation would be better. When I was making this plugin, I tried to include an animation, but it wasn't smooth and very janky, so I removed it. Atom's Panes are divided with flex, and animating flex isn't really a 60fps experience.

I'll check if there are other ways to animate it. Atom has evolved quite a bit since then.

Since I'm currently writing my bachelor's thesis, I'm very busy and can't exactly tell when I'm going to look into this. If someone else reads this and has an idea, feel free to respond.

[mrleblanc101]

Hey, The animation is not the point I think. The real problem is that you squish the content making it look really unpleasant and distracting. There should be an absolute mode where the pane overlap each other instead of being squished. It also cause conflict with the minimal plugin as you can se in the screenshot below.

Then setting pane looks good because it's content doesn't get squished or wrapped over multiple lines

[timomeh]

@mrleblanc101 That's not possible due to the way Panes work in Atom. The only way to not get squished content is by disabling soft wrap at the end of the Window and instead only wrap content at the 80char mark.

[benyanke]

I wish that were possible - that'd be the ideal solution for me too.

[PHLAK]

@mrleblanc101 I don't disagree with your issue, however that's not the problem the @benyanke was trying to solve and for the record, I would absolutely love an animation on pane switch as well.

[ProLoser]

@mrleblanc101 Create a new issue, you sorta hijacked this one with an irrelevant request.

I too am interested in animated resizing.

[timomeh]

If you expand a pane with hey-pane, it adds the className .hey-pane-focus to the pane element. This is there to support custom styling, like dimmed non-active panes, and maybe it can help for the animation.

As I said, I initially tried to publish hey-pane with an animation, but it was really choppy, thus I removed the animation. Imo having a snappy and non-distracting experience without delays is more important than choppy animations and potentially waiting for the pane to be extended, due to the animation and maybe bad performance.

But you can try out an animation by adding this to your stylesheet:

.pane {
  transition: flex 230ms;
}

I wouldn't recommend this "in production", since it causes pane-resizes with your mouse to become really strange. Maybe the .hey-pane-focus class can help here, too.

[PHLAK]

@timomeh Thanks for the tip. I added the snippet to my style.less file and have a relatively smooth transition when clicking between panes.

[skaraman]

I use this in my stylesheet and it's perfect for my desires -

atom-pain-container, atom-pane-axis, .pane, .pane > .tab-bar {
	transition: flex 1s;
}