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+ users gain access to:
- Bezier curve editor: Edit and preview CSS and Motion easing curves.
- More features coming soon
Install
Install via the VS Code Marketplace
Enable Motion+ features
Generate a personal access token, then click "Authenticate" in the Motion panel to open an input dialog for your token.
Features
Copilot docs
Load the latest Motion documentation directly into Copilot. Add docs to a chat by clicking on "Add Context":
Navigating to "MCP Resources..."
Search for the docs you're looking for:
Learn more about Copilot docs
CSS generation
With Motion for Visual Code Studio, 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
600ms linear(0, 0.0121 /* ... */)
Learn more about CSS generation
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.
Issues & feature requests
Found a bug or have a feature request? Open an issue on the Motion repo.
