Add smooth open / close animation to the console

[ecxtacy]

Increasing Access

This feature would improve the UX of the editor. I noticed that the opening and closing of the console is instantaneous. A smooth effect while open and close would be pleasing for the users.

This is the current opening and closing of the console

Feature enhancement details

This feature implementation is quite straightforward. The console height is changing when its opened or closed, therefore adding a simple CSS transition property to the pane would be sufficient to create a smooth animation.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[ecxtacy]

If the issue gets an approval, I would like to have it assigned to me.
Since the issue fix is quite small, I have referenced a PR just in case someones wishes to see what sort of fix I have thought of. Thank you ! 😃

[raclim]

Thanks so much for including the gifs, they're really helpful in getting a sense of the change! I'm sorry I know I just assigned this to you 😅 but after giving it another thought, I think having this transition animation apply to just the console might stand out from the rest of the website, which has a lot of elements that open/close instantaneously.

I feel like this contrast might appear a bit strange, but I also could be overthinking it! I'm wondering what other people's thoughts on this might be?

[ecxtacy]

@raclim Thank you for your suggestion ! It would be nice if others would also share their opinions.
I agree with your point regarding this standing out from the rest of the website. We can begin with animating this console at first and then incrementally animating other capable components of the website.

I noticed that the panes can be easily animated with CSS, like the Sketch Files pane, and if we wish to animate other components we could use CSS too, but I think using some react animation package would be better, since generally their default CSS is display: none and on click the component state changes the CSS to display: flex/block.

Here is the example (animated the Sketch Files pane with CSS) :-

For this issue, I have created a draft PR right now, as this issue requires further discussion.