VSCode Animations

[chpxu]

Issue Type: Feature Request
I have not been able to find any closed or current issue that is relevant/is my issue

VSCode is still my fav Editor, nothing will take me away... :)

When I was comparing Atom to VSCode recently, i found that Atom had an interesting UX which made it feel more smooth and involved with the user, at least personally. For example, they had animated hover icons and a bunch of other stuff. It was small but it was definitely somewhere VSCode could capitalize and improve on, especially considering the amount of icons, buttons/hyperlinks and menus VSCode has. I would like to demonstrate some of these aspects:

• Hover Icons

  • For example, the aforementioned close icon appearing in a smooth expanding animation
  • Possibly slightly wider tabs to fit this in?
  • It could be applied elsewhere in which some icons are just there on volatile (ie, they can disappear and reappear, such as editor tabs)

• Menus! This one is a big advancement should it be implemented. In fact, the new Settings editor actually has some

  • Fade-in/out animation like in the Settings GUI for menus in the menubar (at least on custom mode)
  • Maybe a slide down/up?
  • Is it possible for these tabs (again, at least on custom mode?) to have an animation similar to Microsoft Office, where clicking tabs slides the menus and their content over?
  • Sub-menus could also possibly "slide-out" of their root menus. Maybe ones longer than the root menu can slide out and then "un-collapse" to a certain max-height?
  • This can also apply to creating new editor tabs, they slide out from the previous one,a nd collapse in when exited

• Panels/Sidebar etc.

  • Panels from the sidebar could slide in and out, shifting the editor too (which would also be animated right?)

    • I have my own suggestions for these UI, but that's an issue for another time :)

  • Panels such as the language selector could fade in from invisibility and translate up slightly

• Native VSCode icons

  • Instead of just changing the cursor, how about animating a background transition and making the enlarging that happens a bit less "poppy"? (Won't apply to all native icons tho)
  • Some icons also implement an icon colour change, maybe that could be applied more globally?

That's basically it, also a thing I'd like to point out:
Animations as such can have a performance impact, since stuff has to be consistently rendered, even if it's small and can have little impact, such as icons, large menus can, so if this were to be implemented, probably have an option to enable animations, maybe even select which ones to be animated for finer tuning.

Feel free to share your ideas if you want to, thanks!

Also, I know that there are subtle and some not so subtle animations in VSCode, these were my ideas to extend them throughout, have a great day!

EDIT: A few extras now!

• In Extensions panel, when clicking on an extension and the thing loads up, there will usually be buttons such as "Details", "Contributions", "Changelog" etc, would be cool to see them slide like in Microsoft Office when switching tabs, as mentioned in the main issue
• Switching editors does the same thing?

Damn, I'm going way too far now!

[ghost]

I like how Atom has animated arrows to toggle the panel/sidebar visibility.

[chpxu]

Indeed, that too, ya see how this would be really cool in VSCode, I best stop drooling over this though :)

[chpxu]

BTW, A good example of what I mean by "Hover Icons", check the feedback thingy on the smiley face, has an idea of what I mean for reference too

[ghost]

Possibly related: #8073

[chpxu]

To some extent it is, however that mainly focuses on the UI as a whole, whereas I mainly focus on animations and giving VSCode a more engaging experience, cool to know stuff like this was briefly mentioned back in the days before I started using VSCode (late 2017 anyone?)

[ghost]

Yeah, I kind of want that issue to gain some traction and thought it was appropriate given how animation would rely on the current design. If there was some overhaul that changed the notification interface, for example, animation might be implemented differently.

[chpxu]

Casually Dreams of Animated VSCode

[ghost]

Another idea would be a sticky navbar for the extension preview:

The added functionality of saving space would IMO outweigh the added complexity introduced.

[chpxu]

Animated Dialogs too, some extensions (such as Monokai Pro) produce an alert to purchase a license. Would be cool to see its UI in VSCode Style (as Photoshop puts its Alerts in PS style) and animated

[miguelsolorio]

@beastdestroyer please break these out into individual issues and be as specific as you can. Having a big generic issue makes it hard to prioritize and progress.