{"id":15118519,"url":"https://github.com/BrandonKirbyson/VSCode-Animations","last_synced_at":"2025-09-28T01:30:27.447Z","repository":{"id":165249865,"uuid":"640074154","full_name":"BrandonKirbyson/VSCode-Animations","owner":"BrandonKirbyson","description":"A VSCode extension that adds animations to the editor","archived":false,"fork":false,"pushed_at":"2025-01-01T20:28:15.000Z","size":32481,"stargazers_count":223,"open_issues_count":18,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-01T21:27:44.001Z","etag":null,"topics":["animation","animations","animations-css","vscode","vscode-extension","vscode-theme","vscodium"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=BrandonKirbyson.vscode-animations","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BrandonKirbyson.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-12T23:23:23.000Z","updated_at":"2025-01-01T20:28:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"da0bddf5-c074-4274-a223-9c729193ef22","html_url":"https://github.com/BrandonKirbyson/VSCode-Animations","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrandonKirbyson%2FVSCode-Animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrandonKirbyson%2FVSCode-Animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrandonKirbyson%2FVSCode-Animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BrandonKirbyson%2FVSCode-Animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BrandonKirbyson","download_url":"https://codeload.github.com/BrandonKirbyson/VSCode-Animations/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234475315,"owners_count":18839358,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animations","animations-css","vscode","vscode-extension","vscode-theme","vscodium"],"created_at":"2024-09-26T01:46:18.751Z","updated_at":"2025-09-28T01:30:20.563Z","avatar_url":"https://github.com/BrandonKirbyson.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"./static/logo.png\" height=120 /\u003e\u003c/p\u003e\n\u003cp align=\"center\" style=\"font-weight: bold; font-size: 2rem;\"\u003eVSCode Animations\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n \u003cimg alt=\"Visual Studio Marketplace Rating (Stars)\" src=\"https://img.shields.io/visual-studio-marketplace/stars/brandonkirbyson.vscode-animations?color=blue\u0026style=for-the-badge\"\u003e\n\u003cimg alt=\"Visual Studio Marketplace Downloads\" src=\"https://img.shields.io/visual-studio-marketplace/i/brandonkirbyson.vscode-animations?style=for-the-badge\u0026color=brightgreen\"\u003e\n \u003cimg alt=\"Visual Studio Marketplace Version\" src=\"https://img.shields.io/visual-studio-marketplace/v/brandonkirbyson.vscode-animations?color=blue\u0026style=for-the-badge\u0026color=brightgreen\"\u003e\n \u003cimg alt=\"GitHub Repo Stars\" src=\"https://img.shields.io/github/stars/brandonkirbyson/vscode-animations?color=blue\u0026style=for-the-badge\"\u003e\n\u003c/p\u003e\n\n\u003chr /\u003e\n\n**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**.\n\n\u003c!-- \u003e 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! --\u003e\n\n\u003c!-- [Demo Video](https://github.com/BrandonKirbyson/VSCode-Animations/assets/86384607/b6f951e4-b246-4410-89ea-46cbc170ca6a) --\u003e\n\n\u003cimg src=\"./static/gifs/Demo.gif\" /\u003e\n\nThe theme used in the demo is [Solarized Palenight](https://github.com/BrandonKirbyson/Solarized-Palenight).\n\nCheck it out on [github](https://github.com/BrandonKirbyson/VSCode-Animations)!\n\n[@IgorBabko](https://github.com/igorbabko) made a good video about this extension: [https://youtu.be/Cd6NcXY4Exg?si=tSOhA3OxPVPrUBwF](https://youtu.be/Cd6NcXY4Exg?si=tSOhA3OxPVPrUBwF).\nHe goes through the initial setup, the options, and shows his cool vscode setup using this!\nAlso 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)\n\n\u003e **Note: [Apc Customize UI++](https://github.com/drcika/apc-extension) is currently not working as of [this issue](https://github.com/drcika/apc-extension/issues/230), use Custom CSS and JS Loader or Custom UI Style instead.**\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Showcase](#showcase)\n- [Commands](#commands)\n- [Features \u0026 Customization](#features--customization)\n- [Custom CSS](#custom-css)\n- [Troubleshooting](#troubleshooting)\n- [Contributing](#contributing)\n\n## Getting Started\n\n1. Install the extension with either of these methods:\n\n   - Get it from the [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=BrandonKirbyson.vscode-animations)\n\n   - Search for `VSCode Animations` in the extensions tab in the editor\n\n2. Install the injection extension, window will reload after install:\n\n   - ## Note: [Apc Customize UI++](https://github.com/drcika/apc-extension) is currently not working as of [this issue](https://github.com/drcika/apc-extension/issues/230).\n\n   - There are 3 options [Custom CSS and JS Loader](https://github.com/be5invis/vscode-custom-css)(default), [Custom UI Style](https://github.com/subframe7536/vscode-custom-ui-style), and [Apc Customize UI++ (NOT WORKING)](https://github.com/drcika/apc-extension), see [Injection Extensions](#injection-extensions) for more info\n\n     \u003cimg src=\"static/images/installPrompt.png\" height=100/\u003e\n\n   \u003c!-- - For windows users, Apc Customize UI++ might work better, see [Injection Extensions](#injection-extensions) for more info --\u003e\n\n- Install the animations when prompted, window will reload final time\n\n  - This is the injection extension installing the animations for you\n\n    \u003cimg src=\"static/images/install.png\" height=100/\u003e\n\n3. Enjoy the animations!\n\nIf you have any issues, see [Troubleshooting](#troubleshooting).\n\n\u003e **For Custom CSS and JS:** You might see a prompt that says:\n\u003e `\"VSCode installation is corrupt\"`\n\u003e\n\u003e - To fix, click the settings icon on the notification and `\"Do not show again\"`.\n\u003e - Unfortunately custom js and css needs to be embedded into vscode's UI itself so vscode will throw a warning.\n\n\u003c!-- ### For Other Custom Injection Extension or Open VSX\n\n\u003e **Note:** If you are using the Custom CSS and JS extension on vscode, you do not need to do this.\n\nThis is for people that either could not get the Custom CSS and JS extension to work, want to use the extension on Open VSX, or want to use another extension that injects custom css and js.\n\nIf you want to do this, follow these steps:\n\n- Disable `Auto Install` by setting `Auto Install` to `false` in settings, this will prevent the extension from trying to install via the Custom CSS and JS extension on startup.\n- Use the command `Animations: Get Script Path` to get the path to the animations extension script, should copy to clipboard\n- Add the path to your custom css and js loader and install however the extension requires\n\nHere is a possible extension on Open VSX: [Apc Customize UI++](https://open-vsx.org/extension/drcika/apc-extension). I haven't tested it but it looks like it should work if you follow the instructions above and then use [apc.imports](https://open-vsx.org/extension/drcika/apc-extension#apc.imports) in that extension.\n\n**ONLY DO THIS IF YOU KNOW WHAT YOU ARE DOING** but if you want to use another extension then you probably know what you are doing. If you do have any issues or questions feel free to open an issue.\n\n\u003e For people curious, the reason this extension does not inject the custom code itself is because it could conflict with any other custom injection extension. Becaue of this it is better to use a different extension to inject the code so that you and users can use a custom injection extension for other things as well --\u003e\n\n### Injection Extensions\n\nThe injection extension is what injects the custom css and js into vscode. There are two options:\n\n#### [Custom CSS and JS Loader](https://github.com/be5invis/vscode-custom-css)\n\nPros:\n\n- Default\n- Tested more\n- Requires just window reload on each install\n\nCons:\n\n- Not on Open VSX\n- Fewer features\n- Sometimes has issues on windows\n\n#### [Custom UI Style](https://github.com/subframe7536/vscode-custom-ui-style)\n\nPros:\n\n- New and actively being developed\n- Works with most up-to-date vscode versions\n- Has many additional useful features\n- Helpful popups for reloading and installing\n- Many more settings for customization\n\nCons:\n\n- Very new, less tested\n- Requires full app restart on each install\n\n#### [Apc Customize UI++](https://github.com/drcika/apc-extension)\n\n##### Currently NOT Working in most recent versions of vscode\n\nPros:\n\n- On Open VSX\n- Works better on windows\n- Has many other features\n\nCons:\n\n- Not default\n- Newer, less tested\n- Requires full app restart on each install\n\n\u003e **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.\n\n##### Why use a separate extension?\n\nThe reason this extension does not inject the custom code itself is because it could conflict with any other custom injection extension.\n\n## Showcase\n\nHere is a little showcase of most of the animations. Sorry for the low quality gifs, they look much better in person!\n\n\u003e **Note:** The gifs are slowed down to show the animations better.\n\n#### Smooth Mode\n\nThis is the main feature of the extension. It makes everything super smooth and clean!\n\n\u003cimg src=\"./static/gifs/Smooth-Mode.gif\" alt=\"Smooth-Mode\" width=\"300\"/\u003e\n\n#### Command Palette\n\nThis is fun and satisfying to use!\n\n\u003cimg src=\"./static/gifs/Command-Palette.gif\" alt=\"Command-Palette\" width=\"300\" /\u003e\n\n#### Tabs\n\nA must-have for tabs!\n\n\u003cimg src=\"./static/gifs/Tabs.gif\" alt=\"Tabs\" width=\"300\"/\u003e\n\n#### Scrolling\n\nSatisfying scrolling if you like that sort of thing!\n\n\u003cimg src=\"./static/gifs/Scrolling.gif\" alt=\"Scrolling\" width=\"100\"/\u003e\n\n#### Cursor\n\nA nice little cursor animation, inspired by [this](https://github.com/qwreey75/dotfiles/tree/master/vscode/trailCursorEffect).\n\n\u003cimg src=\"./static/gifs/Cursor.gif\" alt=\"Cursor\" width=\"300\"/\u003e\n\n\u003e 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.\n\u003e You can find this setting by searching for `Editor: Cursor Blinking` in settings (`cmd + ,` or `ctrl + ,`).\n\n#### Active\n\nA nice little animation for the active item!\n\n\u003cimg src=\"./static/gifs/Active.gif\" alt=\"Active\" width=\"300\"/\u003e\n\n#### Focus Dimming\n\nA subtle dimming of unfocused windows\n\n\u003cimg src=\"./static/gifs/Focus-Dimming.gif\" alt=\"Focus Dimming\" width=\"300\"/\u003e\n\n#### ...more coming soon!\n\n## Commands\n\nAll commands can be found by pressing `cmd + shift + p` or `ctrl + shift + p` and searching for `Animations`.\n\n| Command                               | Description                                                                                      |\n| ------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| `Animations: Install Animations`      | Installs the animations js handler to vscode, requires reload                                    |\n| `Animations: Enable Animations`       | Enables animation                                                                                |\n| `Animations: Disable Animations`      | Disables animations                                                                              |\n| `Animations: Open Animation Settings` | Opens the animations settings                                                                    |\n| `Animations: Change Install Method`   | Changes the install method to either `Custom CSS and JS Loader` or `Apc Customize UI++`          |\n| `Animations: Open Custom CSS`         | Opens the custom css file in a new tab                                                           |\n| `Animations: Get Script Path`         | Copies the path to the animations js file to the clipboard for use in custom injection extension |\n\n##### Enabling, disabling or customizing animations will instantly take effect. No need to reload!\n\n## Features \u0026 Customization\n\nYou 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.\n\n### Types\n\nFor customizing each type of animation, you can refer to the list below to see what types of animations are available for each menu item.\n\n| Menu Item         | Options                                                                                                         |\n| ----------------- | --------------------------------------------------------------------------------------------------------------- |\n| `Command Palette` | `None`, `Scale`, `Slide`, `Fade`                                                                                |\n| `Tabs`            | `None`, `Scale`, `Slide`, `Flip`                                                                                |\n| `Scrolling`       | `None`, `Scale`, `Slide`, `Fade`                                                                                |\n| `Active`          | `None`, `Scale`, `Indent`                                                                                       |\n| `Focus Dimming`   | `None`, `Full Window`, `Everything But Editor`, `Everything But Terminal`, `Everything But Editor and Terminal` |\n\n### Toggles\n\nYou can toggle animations on and off for each menu item. This is useful if you want to disable animations for a specific menu item.\n\n- `Smooth Mode`\n- `Custom CSS`\n\n### Durations\n\nIn 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.\n\n### Cursor Animation\n\nIf you select `Us Cursor Color For Cursor Animation` it will use the current theme's cursor color for the cursor animation as expected, and it will live update when you change themes. If you want to use a custom color, you can turn this off and set the color in the `Cursor Animations Options` as seen below.\n\n| Setting       | Description                                  | Options                          |\n| ------------- | -------------------------------------------- | -------------------------------- |\n| `Color`       | The color of the cursor animation            | `Hex` or `RGB` color as `string` |\n| `Style`       | The type of animation to use for the cursor. | `Block`, `Line`                  |\n| `TrailLength` | The length of the trail behind the cursor.   | `Number`                         |\n\n### Focus Dimming\n\nYou 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.\n\n## Custom CSS\n\nYou 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`.\n\nTo 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.\n\n##### The custom css file will live update\n\n## Troubleshooting\n\nIf you are having issues with the extension, try these steps:\n\n1. Run `Animations: Install Animations` command\n\n   - Press `cmd + shift + p` or `ctrl + shift + p` and search for `Animations: Install Animations` and press enter, then reload when prompted\n\n2. 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++`\n\n3. 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\n\n4. Uninstall and reinstall the extension\n\n   - Your settings should be saved but your custom css if you have any will be deleted so make sure to back that up\n\n#### For Linux\n\nIf you are having issues with the extension on Linux, try these steps (from issue [#42](https://github.com/BrandonKirbyson/VSCode-Animations/issues/42):\n\n1.  Temporarily change ownership of VSCode dir: `sudo chown -Rv $USER:$USER /usr/share/code`\n\n2.  Run VSCode and run through all installation steps (uninstall if it was already installed)\n\n3.  Change ownership back to root (for security reasons): `sudo chown -Rv root:root /usr/share/code`\n\nIf you are still having issues, please open an issue.\n\n## Contributing\n\nIf you have any suggestions or find an issue, please open an issue or a pull request.\n\n\u003cbr\u003e\n\n### Enjoy the animations!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBrandonKirbyson%2FVSCode-Animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBrandonKirbyson%2FVSCode-Animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBrandonKirbyson%2FVSCode-Animations/lists"}