DocsAI KitMotion reference

Transition editor

Edit your CSS and Motion animations visually with the Motion AI Kit.

Presented byAdvertise in this space

Edit CSS and Motion transition using visual controls with Motion AI Kit.

The transition editor is available for any agent that supports MCP Apps. There's additionally a real-time transition editor, available for VS Code and code editors that support Open VSX.

The Motion transition editor MCP App
  • CSS & Motion: Animate with either (or both!)
  • Real-time updates: The VS Code extension edits your code in real-time. The MCP App can apply changes via your agent.
  • Cloud saves: Like a transition? Save it to reuse later.
  • Share transitions: Saved transitions appear on your Motion+ profile for others to download.

MCP App

Your agent may choose to open the transition editor whenever editing a transition, or you can manually open with:

/motion open the transition editor

Once you're happy with the transition, click Apply to implement with your agent.

VSCode Extension

Open the Motion panel and highlight any Motion or CSS animation or transition to open the edit controls.

Screenshot of the AI Kit Extension editing animations

Every change updates your code instantly via AST-powered edits, so there's no copy-pasting or manual syncing.

Edits made to your code will preserve most formatting and respect overrides like transition-delay.

Multiple transitions

By selecting multiple transitions, they can be edited simultaneously.

Save

Once you've dialled in the perfect transition, it can be saved to your profile.

Once saved, you can click on the name to edit it. Or, click on the transition curve to apply a saved transition to your selected code.

Saved transitions also work with the AI Kit MCP, so you can prompt your AI to use them directly: "apply my 'snappy' spring to this modal."

Share

Every saved transition appears on your public Motion+ profile (if you have one). Other developers can browse your transitions, preview them, and save them to their own profiles.

It's an easy way to share your animation style with your team, or just show off.

Get the AI Kit

Stop guessing at spring values, or copy-pasting bezier curves from the web. The Motion AI Kit is included with Motion+, along with a library of premium Motion APIs, 330+ examples, 100+ tutorials, private Discord access, and early access to all new Motion APIs.