New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggestion: Slide instead of Jerk #12

Open
benyanke opened this Issue Sep 27, 2017 · 9 comments

Comments

Projects
None yet
6 participants
@benyanke

benyanke commented Sep 27, 2017

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

This comment has been minimized.

Show comment
Hide comment
@timomeh

timomeh Sep 28, 2017

Owner

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.

Owner

timomeh commented Sep 28, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mrleblanc101

mrleblanc101 Oct 10, 2017

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.
capture d ecran 2017-10-10 a 00 26 48

Then setting pane looks good because it's content doesn't get squished or wrapped over multiple lines
capture d ecran 2017-10-10 a 00 30 32

mrleblanc101 commented Oct 10, 2017

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.
capture d ecran 2017-10-10 a 00 26 48

Then setting pane looks good because it's content doesn't get squished or wrapped over multiple lines
capture d ecran 2017-10-10 a 00 30 32

@timomeh

This comment has been minimized.

Show comment
Hide comment
@timomeh

timomeh Oct 10, 2017

Owner

@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.

Owner

timomeh commented Oct 10, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@benyanke

benyanke Oct 10, 2017

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

benyanke commented Oct 10, 2017

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

@PHLAK

This comment has been minimized.

Show comment
Hide comment
@PHLAK

PHLAK Nov 3, 2017

@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.

PHLAK commented Nov 3, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@ProLoser

ProLoser Nov 7, 2017

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

I too am interested in animated resizing.

ProLoser commented Nov 7, 2017

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

I too am interested in animated resizing.

@timomeh

This comment has been minimized.

Show comment
Hide comment
@timomeh

timomeh Nov 9, 2017

Owner

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.

Owner

timomeh commented Nov 9, 2017

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

This comment has been minimized.

Show comment
Hide comment
@PHLAK

PHLAK Nov 9, 2017

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

PHLAK commented Nov 9, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@skaraman

skaraman Dec 5, 2017

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;
}

skaraman commented Dec 5, 2017

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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment