VS Code extension

Turn VS Code into a powerful CSS and Motion animation editor with the official Motion for VS Code extension.

• Copilot docs: Allow Copilot to access the latest Motion 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

Or add install via the Motion for VS Code extension page.

Enable Motion+ features

To unlock Motion+ features, first generate a personal access token, open the Motion panel in VS Code, then click "Authenticate" to enter 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.

Controls

Adjust the control points to edit the selected bezier curve. Additionally:

• Reset point: Click the start/end point to reset the associated control point

• Replay preview: Click the preview animation to replay it