Chapter 129: Transition editor

Core Idea

Edit your CSS and Motion animations visually with the Motion AI Kit for VS Code and MCP App-supporting agents.

Key Concepts

• MCP App: Your agent may choose to open the transition editor whenever editing a transition
• VSCode Extension: Open the Motion panel and highlight any Motion or CSS animation or transition to open the
• Multiple transitions: By selecting multiple transitions
• Save: Once you've dialled in the perfect transition
• Share: Every saved transition appears on your public Motion+ profile (if you have one).
• Get the AI Kit: Stop guessing at spring values
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

/motion open the transition editor

• What it demonstrates: Core usage pattern for Transition editor.

Key Takeaways

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

Connects To

• Install the Motion AI Kit: related Motion doc page.
• Motion AI Kit AI Context: docs and example context for your agent: related Motion doc page.
• Generate CSS springs with your LLM: related Motion doc page.