VSCode Animations
VSCode Animations is a Visual Studio Code extension that adds clean animations to the vscode UI. This is the first and only extension to add animations to vscode and is a must-have because vscode lacks many needed animations that this extension easily provides, not to mention that it also adds many more animations and is all customizable.
The theme used in the demo is Solarized Palenight.
Check it out on github!
Table of Contents
Getting Started
Install the extension with either of these methods:
Install the injection extension, window will reload after install:
- Install the animations when prompted, window will reload final time
- This is the injection extension installing the animations for you
- Enjoy the animations!
If you have any issues, see Troubleshooting.
For Custom CSS and JS: You might see a prompt that says:
"VSCode installation is corrupt"
- To fix, click the settings icon on the notification and
"Do not show again".
- Unfortunately custom js and css needs to be embedded into vscode's UI itself so vscode will throw a warning.
Injection Extensions
The injection extension is what injects the custom css and js into vscode. There are two options:
Pros:
- Default
- Tested more
- Requires just window reload on each install
Cons:
- Not on Open VSX
- Sometimes has issues on windows
Pros:
- Very active development
- On Open VSX
- Works better on windows
- Has many other features
Cons:
- Not default
- Newer, less tested
- Requires full app restart on each install
Note: Make sure to only use one of these extensions at a time, having both installed will cause issues. If you want to switch, use the Animations: Change Install Method command and feel free to uninstall the other extension after window reloads.
Why use a separate extension?
The reason this extension does not inject the custom code itself is because it could conflict with any other custom injection extension.
Showcase
Here is a little showcase of most of the animations. Sorry for the low quality gifs, they look much better in person!
Note: The gifs are slowed down to show the animations better.
Smooth Mode
This is the main feature of the extension. It makes everything super smooth and clean!
Command Palette
This is fun and satisfying to use!
Tabs
A must-have for tabs!
Satisfying scrolling if you like that sort of thing!
Cursor
A nice little cursor animation, inspired by this.
If you are using the cursor animations from this extension, I recommend turning cursor blinking to smooth because blink can make the animation look a little weird.
You can find this setting by searching for Editor: Cursor Blinking in settings (cmd + , or ctrl + ,).
Active
A nice little animation for the active item!
Focus Dimming
A subtle dimming of unfocused windows
...more coming soon!
Commands
All commands can be found by pressing cmd + shift + p or ctrl + shift + p and searching for Animations.
| Command |
Description |
Animations: Install Animations |
Installs the animations js handler to vscode, requires reload |
Animations: Enable Animations |
Enables animation |
Animations: Disable Animations |
Disables animations |
Animations: Open Animation Settings |
Opens the animations settings |
Animations: Change Install Method |
Changes the install method to either Custom CSS and JS Loader or Apc Customize UI++ |
Animations: Open Custom CSS |
Opens the custom css file in a new tab |
Animations: Get Script Path |
Copies the path to the animations js file to the clipboard for use in custom injection extension |
Enabling, disabling or customizing animations will instantly take effect. No need to reload!
Features & Customization
You can customize the animations by running the Animations: Open Animation Settings command or opening settings (cmd + , or ctrl + ,) and searching for Animations. There you can change the animation types, toggle animations, and change animation speeds.
Types
For customizing each type of animation, you can refer to the list below to see what types of animations are available for each menu item.
| Menu Item |
Options |
Command Palette |
None, Scale, Slide, Fade |
Tabs |
None, Scale, Slide, Flip |
Scrolling |
None, Scale, Slide, Fade |
Active |
None, Scale, Indent |
Focus Dimming |
None, Full Window, Everything But Editor, Everything But Terminal, Everything But Editor and Terminal |
Toggles
You can toggle animations on and off for each menu item. This is useful if you want to disable animations for a specific menu item.
Durations
In settings, you can find the durations setting with is a json object that can apply custom durations to any animations. Reference the lists above to see what animations you can change the duration of.
Cursor
You can customize the cursor animation by running the Animations: Open Animation Settings command or opening settings (cmd + , or ctrl + ,) and searching for Animations. There you can change the cursor animation style, toggle the cursor animation, and change more of the animtion settings.
Cursor Animation Settings
| Setting |
Description |
Options |
Color |
The color of the cursor animation |
Hex or RGB color as string |
Style |
The type of animation to use for the cursor. |
Block, Line |
TrailLength |
The length of the trail behind the cursor. |
Number |
Focus Dimming
You can customize how the windows dims when it loses focus. In settings there are options to change the dimmed window's opacity, duration, and you can toggle Full Window mode which if turned on dims everything but if left off leaves the actual code editor full opacity.
Custom CSS
You can customize the animations even further by editing the custom css file. You can open the custom css file by running the Animations: Open Custom CSS command or opening settings (cmd + , or ctrl + ,) and searching for Custom CSS.
To find css selectors to use, you can use the Developer: Toggle Developer Tools command to inspect the editor and find the selectors you want to use.
The custom css file will live update
Troubleshooting
If you are having issues with the extension, try these steps:
Run Animations: Install Animations command
- Press
cmd + shift + p or ctrl + shift + p and search for Animations: Install Animations and press enter, then reload when prompted
If you are on windows and the setting Animations: Install Method in settings is set to Custom CSS and JS Loader, try changing it to Apc Customize UI++
Make sure you have the either Custom CSS and JS Loader or Apc Customize UI++ extension installed, if both are installed there may be conflicts
Uninstall and reinstall the extension
- Your settings should be saved but your custom css if you have any will be deleted so make sure to back that up
If you are still having issues, please open an issue.
Contributing
If you have any suggestions or find an issue, please open an issue or a pull request.
Enjoy the animations!
