https://github.com/motiondivision/motion-vscode

Motion developer tools for VS Code
https://github.com/motiondivision/motion-vscode

Last synced: 9 months ago
JSON representation

Motion developer tools for VS Code

• Host: GitHub
• URL: https://github.com/motiondivision/motion-vscode
• Owner: motiondivision
• License: other
• Created: 2025-06-17T09:18:09.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-18T10:15:40.000Z (about 1 year ago)
• Last Synced: 2025-06-27T15:09:52.356Z (about 1 year ago)
• Language: HTML
• Size: 1.46 MB
• Stars: 16
• Watchers: 1
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  



Supercharge your animation development process with Motion for VS Code.

-   **Copilot docs:** Turn Copilot into a Motion expert with the latest docs.

-   **Copilot CSS generation:** Enhance Copilot's CSS generation with real Motion springs.

Additionally, [Motion+](https://motion.dev/plus) users gain access to:

-   **Bezier curve editor**: Edit and preview CSS and Motion easing curves.

-   More features coming soon

![Bezier curve editing](images/bezier-editing.gif)

## Install

Install via the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Motion.motion-vscode-extension)

### Enable Motion+ features

Generate a [personal access token](https://plus.motion.dev/profile), then click "Authenticate" in the Motion panel to open an input dialog for your token.

![Screenshot of the unauthenticated Motion panel](images/auth.png)

## Features

### Copilot docs

Load the latest Motion documentation directly into Copilot. Add docs to a chat by clicking on "Add Context":

![Screenshot of the Copilot chat window](images/readme-add-context.png)

Navigating to "MCP Resources..."

![Screenshot of the resources list](images/readme-add-context-2.png)

Search for the docs you're looking for:

![Screenshot of the search box](images/readme-add-context-3.png)

[Learn more about Copilot docs](https://motion.dev/docs/ai-llm-documentation)

### CSS generation

With Motion for Visual Studio Code , Copilot gains the ability to generate CSS `linear()` easing curves to create springs or other custom easing curves.

> Generate a CSS spring that's quite bouncy

```js

600ms linear(0, 0.0121 /* ... */)

```

[Learn more about CSS generation](https://motion.dev/docs/ai-generate-css-springs-and-easings-llm)

### Bezier curve editing

When editing a CSS or Motion bezier easing curve while the Motion panel's open, a bezier curve editor will appear. Changes will be immediately reflected in your code.

![Bezier curve editing](images/bezier-editing.gif)

## Issues & feature requests

Found a bug or have a feature request? Open an issue on the [Motion repo](https://github.com/motiondivision/motion).