Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BrandonKirbyson/VSCode-Animations
A VSCode extension that adds animations to the editor
https://github.com/BrandonKirbyson/VSCode-Animations
animation animations animations-css vscode vscode-extension vscode-theme vscodium
Last synced: 1 day ago
JSON representation
A VSCode extension that adds animations to the editor
- Host: GitHub
- URL: https://github.com/BrandonKirbyson/VSCode-Animations
- Owner: BrandonKirbyson
- License: mit
- Created: 2023-05-12T23:23:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-14T20:51:10.000Z (5 months ago)
- Last Synced: 2024-05-15T17:04:55.757Z (4 months ago)
- Topics: animation, animations, animations-css, vscode, vscode-extension, vscode-theme, vscodium
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=BrandonKirbyson.vscode-animations
- Size: 30.9 MB
- Stars: 185
- Watchers: 2
- Forks: 5
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://github.com/BrandonKirbyson/Solarized-Palenight).
Check it out on [github](https://github.com/BrandonKirbyson/VSCode-Animations)!
[@IgorBabko](https://github.com/igorbabko) made a good video about this extension: [https://youtu.be/Cd6NcXY4Exg?si=tSOhA3OxPVPrUBwF](https://youtu.be/Cd6NcXY4Exg?si=tSOhA3OxPVPrUBwF).
He goes through the initial setup, the options, and shows his cool vscode setup using this!
Also the official VSCode youtube made a short on it: [https://www.youtube.com/watch?v=QN0Pfz_ji6I](https://www.youtube.com/watch?v=QN0Pfz_ji6I)
## Table of Contents
- [Getting Started](#getting-started)
- [Showcase](#showcase)
- [Commands](#commands)
- [Features & Customization](#features--customization)
- [Custom CSS](#custom-css)
- [Troubleshooting](#troubleshooting)
- [Contributing](#contributing)
## Getting Started
1. Install the extension with either of these methods:
- Get it from the [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=BrandonKirbyson.vscode-animations)
- Search for `VSCode Animations` in the extensions tab in the editor
2. Install the injection extension, window will reload after install:
- There are two options [Custom CSS and JS Loader](https://github.com/be5invis/vscode-custom-css)(default) and [Apc Customize UI++](https://github.com/drcika/apc-extension), see [Injection Extensions](#injection-extensions) for more info
- For windows users, Apc Customize UI++ might work better, see [Injection Extensions](#injection-extensions) for more info
- Install the animations when prompted, window will reload final time
- This is the injection extension installing the animations for you
3. Enjoy the animations!
If you have any issues, see [Troubleshooting](#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:
#### [Custom CSS and JS Loader](https://github.com/be5invis/vscode-custom-css)
Pros:
- Default
- Tested more
- Requires just window reload on each install
Cons:
- Not on Open VSX
- Sometimes has issues on windows
#### [Apc Customize UI++](https://github.com/drcika/apc-extension)
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!
#### Scrolling
Satisfying scrolling if you like that sort of thing!
#### Cursor
A nice little cursor animation, inspired by [this](https://github.com/qwreey75/dotfiles/tree/master/vscode/trailCursorEffect).
> 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.
- `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
| 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:
1. 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
2. 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++`
3. 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
4. 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
#### For Linux
If you are having issues with the extension on Linux, try these steps (from issue [#42](https://github.com/BrandonKirbyson/VSCode-Animations/issues/42):
1. Temporarily change ownership of VSCode dir: `sudo chown -Rv $USER:$USER /usr/share/code`
2. Run VSCode and run through all installation steps (uninstall if it was already installed)
3. Change ownership back to root (for security reasons): `sudo chown -Rv root:root /usr/share/code`
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!