VSCode Animations

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.

Check out Discussions for Q&A, suggestions, announcements and more!

This extension is actively being developed and will gain many more animations over time. Feel free to request any animations you would like to see added!

Demo Video

Check it out on github!

Table of Contents

• Getting Started
• Showcase
• Commands
• Features & Customization
• Custom CSS
• Troubleshooting
• Contributing

Getting Started

1. Install the extension with either of these methods:

   • Get it from the VSCode Marketplace

   • Search for VSCode Animations in the extensions tab in the editor

2. Reload the editor when prompted Once you have installed and enabled VSCode Animations, you should get a popup that prompts you to reload for animations to take effect. Press Reload and you will see the animations be applied.

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

4. Enjoy the animations!

Troubleshooting

If it doesn't seem to work, open the command palette (cmd + shift + p or ctrl + shift + p) and search for Reload Custom CSS and JS.

If it still doesnt work, check here for more steps.

Note: The extension should prompt you to reload when it gets updated.

Dependencies

This extension requires Custom CSS and JS Loader. If you do not have it installed, you will be prompted to install it.

It is an amazing extension that you can learn more about here.

Personal Recommendation

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 + ,).

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!

Scrolling

Satisfying scrolling if you like that sort of thing!

Cursor

A nice little cursor animation, inspired by this.

Active

A nice little animation for the active item!

...more coming soon!

Commands

All commands can be found by pressing cmd + shift + p or ctrl + shift + p and searching for Animations.

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.

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.

• Smooth Mode
• Custom CSS

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

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:

1. Reload the editor

   • Press cmd + shift + p or ctrl + shift + p and search for Reload Window and press enter

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

3. Make sure you have the Custom CSS and JS Loader extension installed and enabled

4. Enable Custom CSS and JS Extension

   • Press cmd + shift + p or ctrl + shift + p and search for Enable Custom CSS and JS and press enter, then reload when prompted

5. Check the custom css file for errors

   • Press cmd + shift + p or ctrl + shift + p and search for Open Custom CSS and press enter
   • Check to see if you made any errors or possibly overrided other styling

6. 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, pull request, or start a discussion.

If you would like to request an animation, please open an issue or discussion with the animation label and I will try to add it. If you have the css or an example of the animation in action, feel free to include it in the issue or discussion.

Enjoy the animations!