Motion DevTools is a Chrome extension that helps you inspect, edit and export animations made with CSS and Motion One.
In this quick start guide, we'll install Motion DevTools, as well as inspect, edit and export our first animation.
Note: Inspecting is free for all users. Editing and exporting requires a Motion One Pro subscription.
Motion DevTools is available via the Chrome Web Store.
With Motion DevTools installed, Chrome's developer tools will gain a new "Motion" tab.
Chrome's developer tools can be opened either by right-clicking on a page and choosing "Inspect element", or via the
View > Developer > Developer tools option in the main menu.
When the Motion tab is opened, Motion DevTools will automatically begin listening for CSS and Motion One animations. This is indicated by the red record button.
While recording, reload or interact with the page to trigger animations. Detected animations will appear as a timeline.
Animations can be replayed using the playback controls. With these, we can start, pause and skip back to the beginning of an animation.
Click on a keyframe icon to open the Edit keyframe tool:
Here, you're able to inspect the value and easing of a keyframe.
Learn more about inspecting animations.
If you're logged in, the Edit keyframe panel will also allow you to change the value and easing of a keyframe and see those changes reflected in real-time.
Additionally, you can add/move and remove keyframes from the timeline, and add entirely new values. Try moving a keyframe by dragging it:
Learn more about editing animations.
The export panel is opened with the "Export" button at the bottom of the left-panel.
The export panel allows you to export code as a CSS animation, CSS transition, or Motion One animation. From here, you can copy/paste the relevant changes back into your original code.
Learn more about exporting animations.
In this guide we've seen a very brief overview about how Motion DevTools can be used to develop web animations. The individual inspect, edit and export pages have much more information about each set of features.
Sign up to the Motion newsletter to stay up to date with the latest Motion One and Motion DevTools news.